把这个上古卷轴5 2号升级级
点击联系发帖人
时间：2011-08-24 10:27
内容字号：
段落设置：
字体设置：
精准搜索请尝试：
一个命令让Win7/Win8.1迅速获得Win10升级推送
来源：作者：晨风责编：晨风
由于本次升级推送是分期分批进行，因此很多已经预订Win10升级的/用户还没开始接收微软推送。对于这些提前预订的用户来说，大多数都希望能够早日使用到Win10，所以“静静地”等待微软的推送并非用户所愿。其实如果不想等待的话也容易，一条命令就可以让微软马上开始为你推送Win10。命令使用很简单，方法如下：1、删除“C:\Windows\SoftwareDistribution\Download”下所有文件2、按Win+R组合键打开“运行”3、输入&wuauclt.exe /updatenow 后回车（注意，命令中exe和“/”之间有一个空格）4、Windows更新程序开启Win10下载很显然，这条命令就是让当前系统与微软Windows10推送服务器联系，要求其马上推送升级，不过该下载命令只对已经预订Win10的用户有效。鉴于本次Win10推送升级方式为首次尝试，目前已经出现了各种问题。如果你想用较为稳定的安装方式，可选用之前泄露的Win10 RTM正式版官方镜像进行安装，镜像内容和本次微软推送的esd文件版本号完全相同，均为10.0.。Win10正式版系统下载请参见《》。关于全部，尽在IT之家专题，
软媒旗下软件：
IT之家，软媒旗下科技门户网站 - 爱科技，爱这里。
Copyright (C) , All Rights Reserved.为什么要把网站升级到HTTPS3 months ago然后再执行安装的命令：sudo ./path/to/certbot-auto --nginx
它会先安装一些python的包，之后会让你输入你的邮箱，然后自动去找你的nginx配置文件，找出里面的server的域名列出来，让你选哪个要安装https证书：Which names would you like to activate HTTPS for?-------------------------------------------------------------------------------1: -------------------------------------------------------------------------------Select the appropriate numbers separated by commas and/or spaces, or leave inputblank to select all options shown (Enter 'c' to cancel):选好了之后它就会去申请证书，然后检验域名的合法性，如果报了连接超时的错误：- The following errors were reported by the server:Domain: Type: connectionDetail: Timeout那么很可能是防火墙iptables的443端口没有开放，只要把它和80端口一样开放一下就好了。成功验证后它就会把SSL的证书下载下来，同时给nginx的添加ssl的配置：listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live//fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live//privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
还会提示是否要把http的重定向到https，如果选是的话，它就会添加以下nginx配置：if ($scheme != "https") {
return 301 https://$host$request_uri;
} # managed by Certbot
301表示资源永久转移，浏览器收到301响应之后就会自动做重定向。由于网站的很多图片的地址是http的已经固化到数据库里面，导致需要在https的网页里加载http的图片，这样即使是配了证书，浏览器也会提示不安全，浏览器地址样栏的小锁也没有了：如果手动去改数据库会比较麻烦，有个比较简单的方法就是使用让http升级的meta标签：&meta http-equiv="Content-Security-Policy"
content="upgrade-insecure-requests"&
这样页面上所有的http请求都会强制变成https的请求。如果某些请求的服务器不支持https那这些请求就会挂掉，但我这个网站没有这个问题。这样就愉快地把网站免费升级成https了：在浏览器查看证书：https升级后的问题是：加密和解密需要占用更多的CPU，并且加密后的数据会变大，但是据笔者观察加上gzip压缩之后，https传输的内容大小几乎和http一样。除了正常的tcp连接之外，还要建立ssl连接，这个时间一般在0.3s ~ 0.5s左右，这个是需要付出点代价的，但是由于浏览器左下角会提示用户“正在建立安全连接”，有一个缓冲的过程，所以其实还好。赞赏1 人赞赏183收藏分享举报文章被以下专栏收录高效的中文IT技术平台推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&一个专注互联网相关技术的专栏&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&高效的中文IT技术平台&,&urlToken&:&dreawer&,&id&:21254,&imagePath&:&v2-def9c21d9ca33ad157f4208.jpg&,&slug&:&dreawer&,&applyReason&:&0&,&name&:&极乐科技&,&title&:&极乐科技&,&url&:&https:\u002F\\u002Fdreawer&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:25769,&avatar&:{&id&:&v2-def9c21d9ca33ad157f4208&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fv2-def9c21d9ca33ad157f4208_l.jpg&,&articlesCount&:590},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-73a58d3c2f64ecaeaf7e9ddf4d2927f5_r.png&,&lastUpdated&:,&imagePath&:&v2-73a58d3c2f64ecaeaf7e9ddf4d2927f5.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[5],&summary&:&笔者最近把博客网站升级到了https：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps:\u002F\\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，为什么要升级呢？举一个最简单的例子，当我打开\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Freact-js-introduction-for-people-who-know-just-enough-jquery-to-get-by\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E这个网页\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的时候：在网页的右下角会显示一个广告： 但是这个网站是美国的： 为什么中国的广告会打到美国去了？并且不止一个网站有这个问题，自己的…&,©Permission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T18:33:47+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:3796864,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&为什么要把网站升级到HTTPS&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:21254,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-73a58d3c2f64ecaeaf7e9ddf4d2927f5_r.png&,&author&:{&bio&:&程序员&,&isFollowing&:false,&hash&:&086d2ffcb95d&,&uid&:353200,&isOrg&:false,&slug&:&li-yin-cheng-24&,&isFollowed&:false,&description&:&&,&name&:&李银城&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fli-yin-cheng-24&,&avatar&:{&id&:&3c1a4bab55&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:798429}],&title&:&为什么要把网站升级到HTTPS&,&author&:&li-yin-cheng-24&,&content&:&\u003Cp\u003E笔者最近把博客网站升级到了https：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps:\u002F\\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，为什么要升级呢？\u003C\u002Fp\u003E\u003Cp\u003E举一个最简单的例子，当我打开\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Freact-js-introduction-for-people-who-know-just-enough-jquery-to-get-by\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E这个网页\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的时候：在网页的右下角会显示一个广告：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_b.png\& data-rawwidth=\&1328\& data-rawheight=\&722\& class=\&origin_image zh-lightbox-thumb\& width=\&1328\& data-original=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1328'%20height='722'&&\u002Fsvg&\& data-rawwidth=\&1328\& data-rawheight=\&722\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1328\& data-original=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E但是这个网站是美国的：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-35be06ccf446e59dcddb2_b.png\& data-rawwidth=\&621\& data-rawheight=\&371\& class=\&origin_image zh-lightbox-thumb\& width=\&621\& data-original=\&https:\u002F\\u002Fv2-35be06ccf446e59dcddb2_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='621'%20height='371'&&\u002Fsvg&\& data-rawwidth=\&621\& data-rawheight=\&371\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&621\& data-original=\&https:\u002F\\u002Fv2-35be06ccf446e59dcddb2_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-35be06ccf446e59dcddb2_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E为什么中国的广告会打到美国去了？并且不止一个网站有这个问题，自己的博客网站在我家打开经常也会有这个问题，经常会弹一些广告，这是为什么呢？\u003C\u002Fp\u003E\u003Cp\u003E因为网站被运营商劫持了，它往你的html里面注入了一段广告的html，如下图所示：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-3be6dcb43caf6fd71b665_b.png\& data-rawwidth=\&958\& data-rawheight=\&256\& class=\&origin_image zh-lightbox-thumb\& width=\&958\& data-original=\&https:\u002F\\u002Fv2-3be6dcb43caf6fd71b665_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='958'%20height='256'&&\u002Fsvg&\& data-rawwidth=\&958\& data-rawheight=\&256\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&958\& data-original=\&https:\u002F\\u002Fv2-3be6dcb43caf6fd71b665_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-3be6dcb43caf6fd71b665_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E这个时候运营商就相当于一个中间人，如下图所示：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-3da3d06878fcccbcd18ded7_b.jpg\& data-rawwidth=\&702\& data-rawheight=\&364\& class=\&origin_image zh-lightbox-thumb\& width=\&702\& data-original=\&https:\u002F\\u002Fv2-3da3d06878fcccbcd18ded7_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='702'%20height='364'&&\u002Fsvg&\& data-rawwidth=\&702\& data-rawheight=\&364\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&702\& data-original=\&https:\u002F\\u002Fv2-3da3d06878fcccbcd18ded7_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fv2-3da3d06878fcccbcd18ded7_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个我在《\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\u002F03\u002Fhttps\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps连接的前几毫秒发生了什么\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E》已经介绍过，不过不太一样的是，由于中间人的身份比较特殊，是运营商，所以它是在正常的连接上面的。也可以说由于运营商暗地里做了劫持，你也可以认为它不是一个正常的连接了。\u003C\u002Fp\u003E\u003Cp\u003E不管怎么样，这种劫持也叫http劫持只发生在http连接上，而https的连接是没这个问题的，基本只要打开的是https的网页都不会被注入广告。因为传输的数据都是加密的，中间人收到的是一串无法解密的文本，它也不知道怎么篡改。\u003C\u002Fp\u003E\u003Cp\u003E防火防盗防运营商，但是注入广告还算是小事，因为如果是http连接你的数据在网络上都是明文传输的，包括你的密码等敏感信息，你和服务器之间经过的路由都可以嗅探到你的数据，可以做些修改如嵌入一个广告，做一些破坏，或者只单纯的抓取信息如邮件内容、账号密码等。所以使用https是很有必要的，火狐会在非https的网页的密码输入框提示不安全：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-40961fcaabc0bbd103157_b.png\& data-rawwidth=\&608\& data-rawheight=\&210\& class=\&origin_image zh-lightbox-thumb\& width=\&608\& data-original=\&https:\u002F\\u002Fv2-40961fcaabc0bbd103157_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='608'%20height='210'&&\u002Fsvg&\& data-rawwidth=\&608\& data-rawheight=\&210\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&608\& data-original=\&https:\u002F\\u002Fv2-40961fcaabc0bbd103157_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-40961fcaabc0bbd103157_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EChrome\u002Ffirefox等浏览器会在较明显的位置提示当前http网站不安全，只要点一下地址栏左边的i按钮就会弹出来：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-fb5a8cab730a7f33c0929_b.png\& data-rawwidth=\&642\& data-rawheight=\&266\& class=\&origin_image zh-lightbox-thumb\& width=\&642\& data-original=\&https:\u002F\\u002Fv2-fb5a8cab730a7f33c0929_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='642'%20height='266'&&\u002Fsvg&\& data-rawwidth=\&642\& data-rawheight=\&266\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&642\& data-original=\&https:\u002F\\u002Fv2-fb5a8cab730a7f33c0929_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-fb5a8cab730a7f33c0929_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E并且https的网站能够提升SEO。\u003C\u002Fp\u003E\u003Cp\u003E在外面连的公共wifi，使用https能够减少账号信息被盗的风险，但也不是100%安全，因为它可以用其它的方式如在你的设备上种植木马等获取和控制你的账号。\u003C\u002Fp\u003E\u003Cp\u003E不管怎么样，搞一个https还是很有必要的，至少不要让别人以为那个广告是你自己的网站打的。那怎么建立一个https的网站呢？我在《\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\u002F03\u002Fhttps\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps连接的前几毫秒发生了什么\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E》已经简单介绍过，需要购买SSL的证书，网上也有一些免费的证书。在某家证书购买机构可以看到证书的分类和价格：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-1ef1d38f4d6e65cd8b8ecd2fd45ff66a_b.png\& data-rawwidth=\&2326\& data-rawheight=\&1286\& class=\&origin_image zh-lightbox-thumb\& width=\&2326\& data-original=\&https:\u002F\\u002Fv2-1ef1d38f4d6e65cd8b8ecd2fd45ff66a_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2326'%20height='1286'&&\u002Fsvg&\& data-rawwidth=\&2326\& data-rawheight=\&1286\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2326\& data-original=\&https:\u002F\\u002Fv2-1ef1d38f4d6e65cd8b8ecd2fd45ff66a_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-1ef1d38f4d6e65cd8b8ecd2fd45ff66a_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E证书分为三种dv（域名型）、ov（企业型）和ev（增强型），dv是最简单的只要有一个可以访问的域名就可以申请，而ov是给企业用的，申请比较严格需要提供企业的相关材料，ev可以在地址栏上显示公司的名字，如\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。对于我们这种小博客网站搞一个dv型的就可以了。\u003C\u002Fp\u003E\u003Cp\u003E有一个免费的dv型证书颁发机构叫\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fletsencrypt.org\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eletsencrypt\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，它可以提供三个月的免费使用，到期了再续一下就行，所以说它是免费的。而且安装和申请非常简单，使用\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fcertbot.eff.org\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ecertbot\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E安装。下面简单介绍下安装过程：\u003C\u002Fp\u003E\u003Cp\u003E先打开certbot的网站，选择你的操作系统，如笔者用的是centos + nginx：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-6b97f161e9fdefdfc5a5f_b.png\& data-rawwidth=\&1272\& data-rawheight=\&288\& class=\&origin_image zh-lightbox-thumb\& width=\&1272\& data-original=\&https:\u002F\\u002Fv2-6b97f161e9fdefdfc5a5f_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1272'%20height='288'&&\u002Fsvg&\& data-rawwidth=\&1272\& data-rawheight=\&288\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1272\& data-original=\&https:\u002F\\u002Fv2-6b97f161e9fdefdfc5a5f_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-6b97f161e9fdefdfc5a5f_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E然后它就会提示你怎么装了，先下载一个编译好的可执行文件：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-bash\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ewget https:\u002F\u002Fdl.eff.org\u002Fcertbot-auto\nchmod a+x certbot-auto\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后再执行安装的命令：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-bash\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Esudo .\u002Fpath\u002Fto\u002Fcertbot-auto --nginx\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E它会先安装一些python的包，之后会让你输入你的邮箱，然后自动去找你的nginx配置文件，找出里面的server的域名列出来，让你选哪个要安装https证书：\u003C\u002Fp\u003E\u003Cblockquote\u003EWhich names would you like to activate HTTPS for?\u003Cbr\u003E-------------------------------------------------------------------------------\u003Cbr\u003E1: \u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cbr\u003E-------------------------------------------------------------------------------\u003Cbr\u003ESelect the appropriate numbers separated by commas and\u002For spaces, or leave input\u003Cbr\u003Eblank to select all options shown (Enter 'c' to cancel):\u003C\u002Fblockquote\u003E\u003Cp\u003E选好了之后它就会去申请证书，然后检验域名的合法性，如果报了连接超时的错误：\u003C\u002Fp\u003E\u003Cblockquote\u003E- The following errors were reported by the server:\u003Cbr\u003EDomain: \u003Ca href=\&http:\u002F\\u002F?target=http%3A\\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cbr\u003EType: connection\u003Cbr\u003EDetail: Timeout\u003C\u002Fblockquote\u003E\u003Cp\u003E那么很可能是防火墙iptables的443端口没有开放，只要把它和80端口一样开放一下就好了。\u003C\u002Fp\u003E\u003Cp\u003E成功验证后它就会把SSL的证书下载下来，同时给nginx的添加ssl的配置：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-nginx\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Elisten\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E443\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003Essl\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Essl_certificate\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E\u002Fetc\u002Fletsencrypt\u002Flive\\u002Ffullchain.pem\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Essl_certificate_key\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E\u002Fetc\u002Fletsencrypt\u002Flive\\u002Fprivkey.pem\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Einclude\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003E\u002Fetc\u002Fletsencrypt\u002Foptions-ssl-nginx.conf\u003C\u002Fspan\u003E; \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E还会提示是否要把http的重定向到https，如果选是的话，它就会添加以下nginx配置：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-nginx\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nv\&\u003E$scheme\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E!=\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E\&https\&)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kn\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E301\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nv\&\u003E$host$request_uri\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E301表示资源永久转移，浏览器收到301响应之后就会自动做重定向。\u003C\u002Fp\u003E\u003Cp\u003E由于网站的很多图片的地址是http的已经固化到数据库里面，导致需要在https的网页里加载http的图片，这样即使是配了证书，浏览器也会提示不安全，浏览器地址样栏的小锁也没有了：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-0d5e8cdebc640be0a16e641_b.png\& data-rawwidth=\&1068\& data-rawheight=\&122\& class=\&origin_image zh-lightbox-thumb\& width=\&1068\& data-original=\&https:\u002F\\u002Fv2-0d5e8cdebc640be0a16e641_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1068'%20height='122'&&\u002Fsvg&\& data-rawwidth=\&1068\& data-rawheight=\&122\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1068\& data-original=\&https:\u002F\\u002Fv2-0d5e8cdebc640be0a16e641_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-0d5e8cdebc640be0a16e641_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果手动去改数据库会比较麻烦，有个比较简单的方法就是使用让http升级的meta标签：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Emeta\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ehttp-equiv\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&Content-Security-Policy\&\u003C\u002Fspan\u003E \n
\u003Cspan class=\&na\&\u003Econtent\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&upgrade-insecure-requests\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这样页面上所有的http请求都会强制变成https的请求。如果某些请求的服务器不支持https那这些请求就会挂掉，但我这个网站没有这个问题。\u003C\u002Fp\u003E\u003Cp\u003E这样就愉快地把网站免费升级成https了：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-9cdf11ece62a9ce78c5b_b.png\& data-rawwidth=\&826\& data-rawheight=\&70\& class=\&origin_image zh-lightbox-thumb\& width=\&826\& data-original=\&https:\u002F\\u002Fv2-9cdf11ece62a9ce78c5b_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='826'%20height='70'&&\u002Fsvg&\& data-rawwidth=\&826\& data-rawheight=\&70\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&826\& data-original=\&https:\u002F\\u002Fv2-9cdf11ece62a9ce78c5b_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-9cdf11ece62a9ce78c5b_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E在浏览器查看证书：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-8cab4dea22fea2865ebee68_b.png\& data-rawwidth=\&950\& data-rawheight=\&794\& class=\&origin_image zh-lightbox-thumb\& width=\&950\& data-original=\&https:\u002F\\u002Fv2-8cab4dea22fea2865ebee68_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='950'%20height='794'&&\u002Fsvg&\& data-rawwidth=\&950\& data-rawheight=\&794\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&950\& data-original=\&https:\u002F\\u002Fv2-8cab4dea22fea2865ebee68_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-8cab4dea22fea2865ebee68_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003Ehttps升级后的问题是：加密和解密需要占用更多的CPU，并且加密后的数据会变大，但是据笔者观察加上gzip压缩之后，https传输的内容大小几乎和http一样。除了正常的tcp连接之外，还要建立ssl连接，这个时间一般在0.3s ~ 0.5s左右，这个是需要付出点代价的，但是由于浏览器左下角会提示用户“正在建立安全连接”，有一个缓冲的过程，所以其实还好。\u003C\u002Fp\u003E&,&updated&:new Date(&T10:33:47.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:15,&collapsedCount&:0,&likeCount&:183,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[{&isFollowed&:false,&name&:&午阳&,&headline&:&社会主义 极端民族主义
文武双缺 前端&,&avatarUrl&:&https:\u002F\\u002F50\u002Fv2-856d87bf7ce1f9d3cf92e3_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&wang-zhao-ZhiHu&,&bio&:&自古燕赵多侠士 以命相搏卫苍生&,&hash&:&69f9ce9ae375e13eb8c680&,&uid&:44,&isOrg&:false,&description&:&社会主义 极端民族主义
文武双缺 前端&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwang-zhao-ZhiHu&,&avatar&:{&id&:&v2-856d87bf7ce1f9d3cf92e3&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-73a58d3c2f64ecaeaf7e9ddf4d2927f5_r.png&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&HTTPS&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&Nginx&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&}],&adminClosedComment&:false,&titleImageSize&:{&width&:940,&height&:500},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&dreawer&,&name&:&极乐科技&},&tipjarState&:&activated&,&tipjarTagLine&:&真诚赞赏，手留余香&,&sourceUrl&:&&,&pageCommentsCount&:15,&tipjarorCount&:1,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T18:33:47+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&C++开发 \u002F 物流大四生&,&isFollowing&:false,&hash&:&e53b86d03009acf2e54d98b5dfd13c63&,&uid&:72,&isOrg&:false,&slug&:&chen-xin-shuo&,&isFollowed&:false,&description&:&好奇心旺盛&,&name&:&陈心朔&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fchen-xin-shuo&,&avatar&:{&id&:&3a08979ae94eda6af9831468dcee8a48&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&python初学者&,&isFollowing&:false,&hash&:&1da01fdf525c30ad19eeb8ebf002a393&,&uid&:241400,&isOrg&:false,&slug&:&tu-tu-de-lu-xing-28&,&isFollowed&:false,&description&:&&,&name&:&途徒的旅行&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Ftu-tu-de-lu-xing-28&,&avatar&:{&id&:&v2-9dd43c8cd0a&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&学生&,&isFollowing&:false,&hash&:&04ecec5cfb4b29b405d726e&,&uid&:513000,&isOrg&:false,&slug&:&bao-jia-qi-75-1&,&isFollowed&:false,&description&:&&,&name&:&包佳齐&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fbao-jia-qi-75-1&,&avatar&:{&id&:&v2-9fd377c8bb2d33fb28b206d07f10b65a&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&mfc&,&isFollowing&:false,&hash&:&d8e23c33ac8bc9c73abe1e4c1f616a7e&,&uid&:00,&isOrg&:false,&slug&:&wei-yuan-88-25&,&isFollowed&:false,&description&:&&,&name&:&Sunnyuanovo&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwei-yuan-88-25&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&若不是让大家都轻松一些，那么我们活着是为了什么呢？&,&isFollowing&:false,&hash&:&ee31d917afc46feb95fee&,&uid&:007400,&isOrg&:false,&slug&:&neverwintern&,&isFollowed&:false,&description&:&&,&name&:&Neverwintern&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fneverwintern&,&avatar&:{&id&:&v2-bc0fd84cb9f7c209d5cbf&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f.png\& data-rawwidth=\&1328\& data-rawheight=\&722\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_r.png\&\u003E笔者最近把博客网站升级到了https：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps:\u002F\\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，为什么要升级呢？举一个最简单的例子，当我打开\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Freact-js-introduction-for-people-who-know-just-enough-jquery-to-get-by\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E这个网页\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的时候：在网页的右下角会显示一个广告： 但是这个网站是美国的： 为什么中国的广告会打到美国去了？并且不止一个网站有这个问题，自己的…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fv2-5deeb1469c23_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&jQuery&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&React&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&程序员&,&isFollowing&:false,&hash&:&086d2ffcb95d&,&uid&:353200,&isOrg&:false,&slug&:&li-yin-cheng-24&,&isFollowed&:false,&description&:&&,&name&:&李银城&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fli-yin-cheng-24&,&avatar&:{&id&:&3c1a4bab55&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&content&:&\u003Cp\u003E自从React\u002FVue等框架流行之后，jQuery被打上了面条式代码的标签，甚至成了“过街老鼠”，好像谁还在用jQuery，谁就还活在旧时代，很多人都争先恐后地拥抱新框架，各大博客网站有很大一部分的博客都在介绍新的框架，争当时代的“弄潮儿”。新框架带来的新的理念，新的开发方式不可否认带来了生产效率，但是jQuery等就应该被打上“旧时代”面条式代码的标签么？\u003C\u002Fp\u003E\u003Cp\u003E我们从一篇文章说起：《\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F1752\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EReact.js 的介绍 - 针对了解 jQuery 的工程师（译）\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E》，英文原文是这个《\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Freact-js-introduction-for-people-who-know-just-enough-jquery-to-get-by\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EReact.js Introduction For People Who Know Just Enough jQuery To Get By\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E》， 这篇文章我好久前就看过，现在再把它翻出来，里面对比了下jQuery和React分别实现一个发推的功能，作者用jQuery写着写着代码就乱套了，而用React不管需求多复杂，代码条理依旧很清晰。\u003C\u002Fp\u003E\u003Cp\u003E我们一步步按照原文作者的思路来拆解。\u003C\u002Fp\u003E\u003Ch2\u003E（1）输入个数为0时，发送按钮不可点击\u003C\u002Fh2\u003E\u003Cp\u003E如下图所示，当输入框没有内容时，发推按钮置灰不可点，有内容点才能点。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg data-rawheight=\&280\& src=\&http:\u002F\\u002Fv2-8ed94a62d8a0f97e627f6ad4b29c76fd_b.png\& data-rawwidth=\&822\& class=\&origin_image zh-lightbox-thumb\& width=\&822\& data-original=\&http:\u002F\\u002Fv2-8ed94a62d8a0f97e627f6ad4b29c76fd_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E作者写的代码是这样的：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&c1\&\u003E\u002F\u002F 初始化状态\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&button\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprop\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&disabled\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&c1\&\u003E\u002F\u002F 文本框的值发生变化时\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&textarea\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 只要超过一个字符，就\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eval\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E().\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 按钮可以点击\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&button\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprop\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&disabled\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Efalse\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Eelse\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F否则，按钮不能点击\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&button\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprop\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&disabled\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这个代码本身写得很累赘，首先，既然一开始那个button是disabled的，那就直接在html上写个disabled属性就行了：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eform\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&tweet-box\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etextarea\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&textMsg\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etextarea\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Einput\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Edisabled\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&submit\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&tweet\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&Tweet\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E第二个要控制按钮的状态，其实核心只要一行代码就行了，不需要写那么长：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Elet\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&.tweet-box\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E];\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EtextMsg\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etweet\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Edisabled\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etrigger\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这个代码应该够简洁了吧，而且代码在jQuery和原生之间来回切换，游刃有余。\u003C\u002Fp\u003E\u003Ch2\u003E（2）实现剩余字数功能\u003C\u002Fh2\u003E\u003Cp\u003E如下图所示：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg data-rawheight=\&286\& src=\&http:\u002F\\u002Fv2-5deeb1469c23_b.png\& data-rawwidth=\&836\& class=\&origin_image zh-lightbox-thumb\& width=\&836\& data-original=\&http:\u002F\\u002Fv2-5deeb1469c23_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个也好实现：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Elet\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&.tweet-box\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E],\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$leftWordCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&#left-word-count\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EtextMsg\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 已有字数\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kd\&\u003Elet\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$leftWordCount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E140\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etweet\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Edisabled\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E（3）添加图片按钮\u003C\u002Fh2\u003E\u003Cp\u003E如下图所示，左下角多了一个选择照片的按钮：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg data-rawheight=\&328\& src=\&http:\u002F\\u002Fv2-4eaa272c556d71e801c73_b.png\& data-rawwidth=\&984\& class=\&origin_image zh-lightbox-thumb\& width=\&984\& data-original=\&http:\u002F\\u002Fv2-4eaa272c556d71e801c73_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果用户选择了照片，那么可输入字数将会减少23个字符，并且Add Photo文案要变成Photo Added。我们先来看下作者是怎么实现的，如下代码：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EhasClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&is-on\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E))\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EremoveClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&is-on\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&Add Photo\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&span\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E140\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&textarea\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eval\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E().\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Eelse\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EaddClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&is-on\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&? Photo Added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&span\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E140\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E23\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&textarea\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eval\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E().\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E如果代码像作者这样写的话确实是比较乱，而且比较面条式。但是我们可以优雅地实现。首先，选择照片一般会写一个input[type=file]的隐藏输入框盖在上传图标下面：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&upload-container\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eimg\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&upload-icon.png\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ealt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Espan\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eid\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&add-photo\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003EAdd Photo\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Espan\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Einput\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&file\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&photoUpload\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后监听它的change事件，在change事件里面给form套一个类：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EphotoUpload\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&change\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 如果选择了照片则添加一个photo-added的类\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EaddClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 否则去掉\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EremoveClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后就可以来实现文案改变的需求了，把上面#add-photo的span标签添加两个data属性，分别是照片添加和未添加的文案，如下代码所示：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Espan\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eid\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&add-photo\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Edata-added-text\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&Photo Added\&\u003C\u002Fspan\u003E \n
\u003Cspan class=\&na\&\u003Edata-empty-text\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&Add Photo\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Espan\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E通过form的类结合before\u002Fafter伪类控制html上的文案，如下代码所示：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-css\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nn\&\u003E#add-photo\u003C\u002Fspan\u003E\u003Cspan class=\&nd\&\u003E:before\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Econtent\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eattr\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eempty\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E\u003Cspan class=\&nb\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nt\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&nc\&\u003E.photo-added\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003E#add-photo\u003C\u002Fspan\u003E\u003Cspan class=\&nd\&\u003E:before\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Econtent\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eattr\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eadded\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E\u003Cspan class=\&nb\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这样就可以了，我们算是用了一个比较优雅的方式实现了一个文案变化的功能，其中CSS的attr可以兼容到IE9，并且这里html\u002Fcss\u002Fjs相配合，共同完成这个变化的功能，这应该也挺好玩的。\u003C\u002Fp\u003E\u003Cp\u003E剩下一个要减掉23字符的需求，只需要在减掉的时候判断一下：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EtextMsg\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 已有字数\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kd\&\u003Elet\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etweet\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Edisabled\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$leftWordCount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E140\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \n
\u003Cspan class=\&c1\&\u003E\u002F\u002F如果已经添加了图片再减掉23个字符\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EhasClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E23\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E));\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后在选择图片之后trigger一下，让文字发生变化，如下代码倒数第二行：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&cm\&\u003E\u002F*\u003C\u002Fspan\u003E\n\u003Cspan class=\&cm\&\u003E * @trigger 会触发文字输入框的input事件以更新剩余字数\u003C\u002Fspan\u003E\n\u003Cspan class=\&cm\&\u003E *\u002F\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EphotoUpload\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&change\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 如果选择了照片则添加一个photo-added的类\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EaddClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 否则去掉\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EremoveClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p}
段落设置：
字体设置：
精准搜索请尝试：
一个命令让Win7/Win8.1迅速获得Win10升级推送
来源：作者：晨风责编：晨风
由于本次升级推送是分期分批进行，因此很多已经预订Win10升级的/用户还没开始接收微软推送。对于这些提前预订的用户来说，大多数都希望能够早日使用到Win10，所以“静静地”等待微软的推送并非用户所愿。其实如果不想等待的话也容易，一条命令就可以让微软马上开始为你推送Win10。命令使用很简单，方法如下：1、删除“C:\Windows\SoftwareDistribution\Download”下所有文件2、按Win+R组合键打开“运行”3、输入&wuauclt.exe /updatenow 后回车（注意，命令中exe和“/”之间有一个空格）4、Windows更新程序开启Win10下载很显然，这条命令就是让当前系统与微软Windows10推送服务器联系，要求其马上推送升级，不过该下载命令只对已经预订Win10的用户有效。鉴于本次Win10推送升级方式为首次尝试，目前已经出现了各种问题。如果你想用较为稳定的安装方式，可选用之前泄露的Win10 RTM正式版官方镜像进行安装，镜像内容和本次微软推送的esd文件版本号完全相同，均为10.0.。Win10正式版系统下载请参见《》。关于全部，尽在IT之家专题，
软媒旗下软件：
IT之家，软媒旗下科技门户网站 - 爱科技，爱这里。
Copyright (C) , All Rights Reserved.为什么要把网站升级到HTTPS3 months ago然后再执行安装的命令：sudo ./path/to/certbot-auto --nginx
它会先安装一些python的包，之后会让你输入你的邮箱，然后自动去找你的nginx配置文件，找出里面的server的域名列出来，让你选哪个要安装https证书：Which names would you like to activate HTTPS for?-------------------------------------------------------------------------------1: -------------------------------------------------------------------------------Select the appropriate numbers separated by commas and/or spaces, or leave inputblank to select all options shown (Enter 'c' to cancel):选好了之后它就会去申请证书，然后检验域名的合法性，如果报了连接超时的错误：- The following errors were reported by the server:Domain: Type: connectionDetail: Timeout那么很可能是防火墙iptables的443端口没有开放，只要把它和80端口一样开放一下就好了。成功验证后它就会把SSL的证书下载下来，同时给nginx的添加ssl的配置：listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live//fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live//privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
还会提示是否要把http的重定向到https，如果选是的话，它就会添加以下nginx配置：if ($scheme != "https") {
return 301 https://$host$request_uri;
} # managed by Certbot
301表示资源永久转移，浏览器收到301响应之后就会自动做重定向。由于网站的很多图片的地址是http的已经固化到数据库里面，导致需要在https的网页里加载http的图片，这样即使是配了证书，浏览器也会提示不安全，浏览器地址样栏的小锁也没有了：如果手动去改数据库会比较麻烦，有个比较简单的方法就是使用让http升级的meta标签：&meta http-equiv="Content-Security-Policy"
content="upgrade-insecure-requests"&
这样页面上所有的http请求都会强制变成https的请求。如果某些请求的服务器不支持https那这些请求就会挂掉，但我这个网站没有这个问题。这样就愉快地把网站免费升级成https了：在浏览器查看证书：https升级后的问题是：加密和解密需要占用更多的CPU，并且加密后的数据会变大，但是据笔者观察加上gzip压缩之后，https传输的内容大小几乎和http一样。除了正常的tcp连接之外，还要建立ssl连接，这个时间一般在0.3s ~ 0.5s左右，这个是需要付出点代价的，但是由于浏览器左下角会提示用户“正在建立安全连接”，有一个缓冲的过程，所以其实还好。赞赏1 人赞赏183收藏分享举报文章被以下专栏收录高效的中文IT技术平台推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&一个专注互联网相关技术的专栏&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&高效的中文IT技术平台&,&urlToken&:&dreawer&,&id&:21254,&imagePath&:&v2-def9c21d9ca33ad157f4208.jpg&,&slug&:&dreawer&,&applyReason&:&0&,&name&:&极乐科技&,&title&:&极乐科技&,&url&:&https:\u002F\\u002Fdreawer&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:25769,&avatar&:{&id&:&v2-def9c21d9ca33ad157f4208&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fv2-def9c21d9ca33ad157f4208_l.jpg&,&articlesCount&:590},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-73a58d3c2f64ecaeaf7e9ddf4d2927f5_r.png&,&lastUpdated&:,&imagePath&:&v2-73a58d3c2f64ecaeaf7e9ddf4d2927f5.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[5],&summary&:&笔者最近把博客网站升级到了https：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps:\u002F\\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，为什么要升级呢？举一个最简单的例子，当我打开\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Freact-js-introduction-for-people-who-know-just-enough-jquery-to-get-by\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E这个网页\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的时候：在网页的右下角会显示一个广告： 但是这个网站是美国的： 为什么中国的广告会打到美国去了？并且不止一个网站有这个问题，自己的…&,©Permission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T18:33:47+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:3796864,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&为什么要把网站升级到HTTPS&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:21254,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-73a58d3c2f64ecaeaf7e9ddf4d2927f5_r.png&,&author&:{&bio&:&程序员&,&isFollowing&:false,&hash&:&086d2ffcb95d&,&uid&:353200,&isOrg&:false,&slug&:&li-yin-cheng-24&,&isFollowed&:false,&description&:&&,&name&:&李银城&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fli-yin-cheng-24&,&avatar&:{&id&:&3c1a4bab55&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:798429}],&title&:&为什么要把网站升级到HTTPS&,&author&:&li-yin-cheng-24&,&content&:&\u003Cp\u003E笔者最近把博客网站升级到了https：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps:\u002F\\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，为什么要升级呢？\u003C\u002Fp\u003E\u003Cp\u003E举一个最简单的例子，当我打开\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Freact-js-introduction-for-people-who-know-just-enough-jquery-to-get-by\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E这个网页\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的时候：在网页的右下角会显示一个广告：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_b.png\& data-rawwidth=\&1328\& data-rawheight=\&722\& class=\&origin_image zh-lightbox-thumb\& width=\&1328\& data-original=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1328'%20height='722'&&\u002Fsvg&\& data-rawwidth=\&1328\& data-rawheight=\&722\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1328\& data-original=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E但是这个网站是美国的：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-35be06ccf446e59dcddb2_b.png\& data-rawwidth=\&621\& data-rawheight=\&371\& class=\&origin_image zh-lightbox-thumb\& width=\&621\& data-original=\&https:\u002F\\u002Fv2-35be06ccf446e59dcddb2_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='621'%20height='371'&&\u002Fsvg&\& data-rawwidth=\&621\& data-rawheight=\&371\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&621\& data-original=\&https:\u002F\\u002Fv2-35be06ccf446e59dcddb2_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-35be06ccf446e59dcddb2_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E为什么中国的广告会打到美国去了？并且不止一个网站有这个问题，自己的博客网站在我家打开经常也会有这个问题，经常会弹一些广告，这是为什么呢？\u003C\u002Fp\u003E\u003Cp\u003E因为网站被运营商劫持了，它往你的html里面注入了一段广告的html，如下图所示：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-3be6dcb43caf6fd71b665_b.png\& data-rawwidth=\&958\& data-rawheight=\&256\& class=\&origin_image zh-lightbox-thumb\& width=\&958\& data-original=\&https:\u002F\\u002Fv2-3be6dcb43caf6fd71b665_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='958'%20height='256'&&\u002Fsvg&\& data-rawwidth=\&958\& data-rawheight=\&256\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&958\& data-original=\&https:\u002F\\u002Fv2-3be6dcb43caf6fd71b665_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-3be6dcb43caf6fd71b665_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E这个时候运营商就相当于一个中间人，如下图所示：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-3da3d06878fcccbcd18ded7_b.jpg\& data-rawwidth=\&702\& data-rawheight=\&364\& class=\&origin_image zh-lightbox-thumb\& width=\&702\& data-original=\&https:\u002F\\u002Fv2-3da3d06878fcccbcd18ded7_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='702'%20height='364'&&\u002Fsvg&\& data-rawwidth=\&702\& data-rawheight=\&364\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&702\& data-original=\&https:\u002F\\u002Fv2-3da3d06878fcccbcd18ded7_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fv2-3da3d06878fcccbcd18ded7_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个我在《\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\u002F03\u002Fhttps\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps连接的前几毫秒发生了什么\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E》已经介绍过，不过不太一样的是，由于中间人的身份比较特殊，是运营商，所以它是在正常的连接上面的。也可以说由于运营商暗地里做了劫持，你也可以认为它不是一个正常的连接了。\u003C\u002Fp\u003E\u003Cp\u003E不管怎么样，这种劫持也叫http劫持只发生在http连接上，而https的连接是没这个问题的，基本只要打开的是https的网页都不会被注入广告。因为传输的数据都是加密的，中间人收到的是一串无法解密的文本，它也不知道怎么篡改。\u003C\u002Fp\u003E\u003Cp\u003E防火防盗防运营商，但是注入广告还算是小事，因为如果是http连接你的数据在网络上都是明文传输的，包括你的密码等敏感信息，你和服务器之间经过的路由都可以嗅探到你的数据，可以做些修改如嵌入一个广告，做一些破坏，或者只单纯的抓取信息如邮件内容、账号密码等。所以使用https是很有必要的，火狐会在非https的网页的密码输入框提示不安全：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-40961fcaabc0bbd103157_b.png\& data-rawwidth=\&608\& data-rawheight=\&210\& class=\&origin_image zh-lightbox-thumb\& width=\&608\& data-original=\&https:\u002F\\u002Fv2-40961fcaabc0bbd103157_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='608'%20height='210'&&\u002Fsvg&\& data-rawwidth=\&608\& data-rawheight=\&210\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&608\& data-original=\&https:\u002F\\u002Fv2-40961fcaabc0bbd103157_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-40961fcaabc0bbd103157_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003EChrome\u002Ffirefox等浏览器会在较明显的位置提示当前http网站不安全，只要点一下地址栏左边的i按钮就会弹出来：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-fb5a8cab730a7f33c0929_b.png\& data-rawwidth=\&642\& data-rawheight=\&266\& class=\&origin_image zh-lightbox-thumb\& width=\&642\& data-original=\&https:\u002F\\u002Fv2-fb5a8cab730a7f33c0929_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='642'%20height='266'&&\u002Fsvg&\& data-rawwidth=\&642\& data-rawheight=\&266\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&642\& data-original=\&https:\u002F\\u002Fv2-fb5a8cab730a7f33c0929_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-fb5a8cab730a7f33c0929_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E并且https的网站能够提升SEO。\u003C\u002Fp\u003E\u003Cp\u003E在外面连的公共wifi，使用https能够减少账号信息被盗的风险，但也不是100%安全，因为它可以用其它的方式如在你的设备上种植木马等获取和控制你的账号。\u003C\u002Fp\u003E\u003Cp\u003E不管怎么样，搞一个https还是很有必要的，至少不要让别人以为那个广告是你自己的网站打的。那怎么建立一个https的网站呢？我在《\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\u002F03\u002Fhttps\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps连接的前几毫秒发生了什么\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E》已经简单介绍过，需要购买SSL的证书，网上也有一些免费的证书。在某家证书购买机构可以看到证书的分类和价格：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-1ef1d38f4d6e65cd8b8ecd2fd45ff66a_b.png\& data-rawwidth=\&2326\& data-rawheight=\&1286\& class=\&origin_image zh-lightbox-thumb\& width=\&2326\& data-original=\&https:\u002F\\u002Fv2-1ef1d38f4d6e65cd8b8ecd2fd45ff66a_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='2326'%20height='1286'&&\u002Fsvg&\& data-rawwidth=\&2326\& data-rawheight=\&1286\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&2326\& data-original=\&https:\u002F\\u002Fv2-1ef1d38f4d6e65cd8b8ecd2fd45ff66a_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-1ef1d38f4d6e65cd8b8ecd2fd45ff66a_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E证书分为三种dv（域名型）、ov（企业型）和ev（增强型），dv是最简单的只要有一个可以访问的域名就可以申请，而ov是给企业用的，申请比较严格需要提供企业的相关材料，ev可以在地址栏上显示公司的名字，如\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。对于我们这种小博客网站搞一个dv型的就可以了。\u003C\u002Fp\u003E\u003Cp\u003E有一个免费的dv型证书颁发机构叫\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fletsencrypt.org\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eletsencrypt\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，它可以提供三个月的免费使用，到期了再续一下就行，所以说它是免费的。而且安装和申请非常简单，使用\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fcertbot.eff.org\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ecertbot\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E安装。下面简单介绍下安装过程：\u003C\u002Fp\u003E\u003Cp\u003E先打开certbot的网站，选择你的操作系统，如笔者用的是centos + nginx：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-6b97f161e9fdefdfc5a5f_b.png\& data-rawwidth=\&1272\& data-rawheight=\&288\& class=\&origin_image zh-lightbox-thumb\& width=\&1272\& data-original=\&https:\u002F\\u002Fv2-6b97f161e9fdefdfc5a5f_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1272'%20height='288'&&\u002Fsvg&\& data-rawwidth=\&1272\& data-rawheight=\&288\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1272\& data-original=\&https:\u002F\\u002Fv2-6b97f161e9fdefdfc5a5f_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-6b97f161e9fdefdfc5a5f_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E然后它就会提示你怎么装了，先下载一个编译好的可执行文件：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-bash\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Ewget https:\u002F\u002Fdl.eff.org\u002Fcertbot-auto\nchmod a+x certbot-auto\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后再执行安装的命令：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-bash\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Esudo .\u002Fpath\u002Fto\u002Fcertbot-auto --nginx\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E它会先安装一些python的包，之后会让你输入你的邮箱，然后自动去找你的nginx配置文件，找出里面的server的域名列出来，让你选哪个要安装https证书：\u003C\u002Fp\u003E\u003Cblockquote\u003EWhich names would you like to activate HTTPS for?\u003Cbr\u003E-------------------------------------------------------------------------------\u003Cbr\u003E1: \u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cbr\u003E-------------------------------------------------------------------------------\u003Cbr\u003ESelect the appropriate numbers separated by commas and\u002For spaces, or leave input\u003Cbr\u003Eblank to select all options shown (Enter 'c' to cancel):\u003C\u002Fblockquote\u003E\u003Cp\u003E选好了之后它就会去申请证书，然后检验域名的合法性，如果报了连接超时的错误：\u003C\u002Fp\u003E\u003Cblockquote\u003E- The following errors were reported by the server:\u003Cbr\u003EDomain: \u003Ca href=\&http:\u002F\\u002F?target=http%3A\\& class=\& external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E\u003Cspan class=\&invisible\&\u003Ehttp:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&visible\&\\u003C\u002Fspan\u003E\u003Cspan class=\&invisible\&\u003E\u003C\u002Fspan\u003E\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003Cbr\u003EType: connection\u003Cbr\u003EDetail: Timeout\u003C\u002Fblockquote\u003E\u003Cp\u003E那么很可能是防火墙iptables的443端口没有开放，只要把它和80端口一样开放一下就好了。\u003C\u002Fp\u003E\u003Cp\u003E成功验证后它就会把SSL的证书下载下来，同时给nginx的添加ssl的配置：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-nginx\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Elisten\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E443\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003Essl\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Essl_certificate\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E\u002Fetc\u002Fletsencrypt\u002Flive\\u002Ffullchain.pem\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Essl_certificate_key\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E\u002Fetc\u002Fletsencrypt\u002Flive\\u002Fprivkey.pem\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003Cspan class=\&k\&\u003Einclude\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003E\u002Fetc\u002Fletsencrypt\u002Foptions-ssl-nginx.conf\u003C\u002Fspan\u003E; \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E还会提示是否要把http的重定向到https，如果选是的话，它就会添加以下nginx配置：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-nginx\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nv\&\u003E$scheme\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E!=\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003E\&https\&)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kn\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E301\u003C\u002Fspan\u003E \u003Cspan class=\&s\&\u003Ehttps:\u002F\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nv\&\u003E$host$request_uri\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&c1\&\u003E# managed by Certbot\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E301表示资源永久转移，浏览器收到301响应之后就会自动做重定向。\u003C\u002Fp\u003E\u003Cp\u003E由于网站的很多图片的地址是http的已经固化到数据库里面，导致需要在https的网页里加载http的图片，这样即使是配了证书，浏览器也会提示不安全，浏览器地址样栏的小锁也没有了：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-0d5e8cdebc640be0a16e641_b.png\& data-rawwidth=\&1068\& data-rawheight=\&122\& class=\&origin_image zh-lightbox-thumb\& width=\&1068\& data-original=\&https:\u002F\\u002Fv2-0d5e8cdebc640be0a16e641_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1068'%20height='122'&&\u002Fsvg&\& data-rawwidth=\&1068\& data-rawheight=\&122\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1068\& data-original=\&https:\u002F\\u002Fv2-0d5e8cdebc640be0a16e641_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-0d5e8cdebc640be0a16e641_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果手动去改数据库会比较麻烦，有个比较简单的方法就是使用让http升级的meta标签：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Emeta\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ehttp-equiv\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&Content-Security-Policy\&\u003C\u002Fspan\u003E \n
\u003Cspan class=\&na\&\u003Econtent\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&upgrade-insecure-requests\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这样页面上所有的http请求都会强制变成https的请求。如果某些请求的服务器不支持https那这些请求就会挂掉，但我这个网站没有这个问题。\u003C\u002Fp\u003E\u003Cp\u003E这样就愉快地把网站免费升级成https了：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-9cdf11ece62a9ce78c5b_b.png\& data-rawwidth=\&826\& data-rawheight=\&70\& class=\&origin_image zh-lightbox-thumb\& width=\&826\& data-original=\&https:\u002F\\u002Fv2-9cdf11ece62a9ce78c5b_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='826'%20height='70'&&\u002Fsvg&\& data-rawwidth=\&826\& data-rawheight=\&70\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&826\& data-original=\&https:\u002F\\u002Fv2-9cdf11ece62a9ce78c5b_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-9cdf11ece62a9ce78c5b_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E在浏览器查看证书：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-8cab4dea22fea2865ebee68_b.png\& data-rawwidth=\&950\& data-rawheight=\&794\& class=\&origin_image zh-lightbox-thumb\& width=\&950\& data-original=\&https:\u002F\\u002Fv2-8cab4dea22fea2865ebee68_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='950'%20height='794'&&\u002Fsvg&\& data-rawwidth=\&950\& data-rawheight=\&794\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&950\& data-original=\&https:\u002F\\u002Fv2-8cab4dea22fea2865ebee68_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-8cab4dea22fea2865ebee68_b.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003Ehttps升级后的问题是：加密和解密需要占用更多的CPU，并且加密后的数据会变大，但是据笔者观察加上gzip压缩之后，https传输的内容大小几乎和http一样。除了正常的tcp连接之外，还要建立ssl连接，这个时间一般在0.3s ~ 0.5s左右，这个是需要付出点代价的，但是由于浏览器左下角会提示用户“正在建立安全连接”，有一个缓冲的过程，所以其实还好。\u003C\u002Fp\u003E&,&updated&:new Date(&T10:33:47.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:15,&collapsedCount&:0,&likeCount&:183,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[{&isFollowed&:false,&name&:&午阳&,&headline&:&社会主义 极端民族主义
文武双缺 前端&,&avatarUrl&:&https:\u002F\\u002F50\u002Fv2-856d87bf7ce1f9d3cf92e3_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&wang-zhao-ZhiHu&,&bio&:&自古燕赵多侠士 以命相搏卫苍生&,&hash&:&69f9ce9ae375e13eb8c680&,&uid&:44,&isOrg&:false,&description&:&社会主义 极端民族主义
文武双缺 前端&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwang-zhao-ZhiHu&,&avatar&:{&id&:&v2-856d87bf7ce1f9d3cf92e3&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-73a58d3c2f64ecaeaf7e9ddf4d2927f5_r.png&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&HTTPS&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&Nginx&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&}],&adminClosedComment&:false,&titleImageSize&:{&width&:940,&height&:500},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&dreawer&,&name&:&极乐科技&},&tipjarState&:&activated&,&tipjarTagLine&:&真诚赞赏，手留余香&,&sourceUrl&:&&,&pageCommentsCount&:15,&tipjarorCount&:1,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T18:33:47+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&C++开发 \u002F 物流大四生&,&isFollowing&:false,&hash&:&e53b86d03009acf2e54d98b5dfd13c63&,&uid&:72,&isOrg&:false,&slug&:&chen-xin-shuo&,&isFollowed&:false,&description&:&好奇心旺盛&,&name&:&陈心朔&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fchen-xin-shuo&,&avatar&:{&id&:&3a08979ae94eda6af9831468dcee8a48&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&python初学者&,&isFollowing&:false,&hash&:&1da01fdf525c30ad19eeb8ebf002a393&,&uid&:241400,&isOrg&:false,&slug&:&tu-tu-de-lu-xing-28&,&isFollowed&:false,&description&:&&,&name&:&途徒的旅行&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Ftu-tu-de-lu-xing-28&,&avatar&:{&id&:&v2-9dd43c8cd0a&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&学生&,&isFollowing&:false,&hash&:&04ecec5cfb4b29b405d726e&,&uid&:513000,&isOrg&:false,&slug&:&bao-jia-qi-75-1&,&isFollowed&:false,&description&:&&,&name&:&包佳齐&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fbao-jia-qi-75-1&,&avatar&:{&id&:&v2-9fd377c8bb2d33fb28b206d07f10b65a&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&mfc&,&isFollowing&:false,&hash&:&d8e23c33ac8bc9c73abe1e4c1f616a7e&,&uid&:00,&isOrg&:false,&slug&:&wei-yuan-88-25&,&isFollowed&:false,&description&:&&,&name&:&Sunnyuanovo&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwei-yuan-88-25&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&若不是让大家都轻松一些，那么我们活着是为了什么呢？&,&isFollowing&:false,&hash&:&ee31d917afc46feb95fee&,&uid&:007400,&isOrg&:false,&slug&:&neverwintern&,&isFollowed&:false,&description&:&&,&name&:&Neverwintern&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fneverwintern&,&avatar&:{&id&:&v2-bc0fd84cb9f7c209d5cbf&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f.png\& data-rawwidth=\&1328\& data-rawheight=\&722\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\\u002Fv2-e23e0cde0af72dd6c4f8920_r.png\&\u003E笔者最近把博客网站升级到了https：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ehttps:\u002F\\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，为什么要升级呢？举一个最简单的例子，当我打开\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Freact-js-introduction-for-people-who-know-just-enough-jquery-to-get-by\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E这个网页\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的时候：在网页的右下角会显示一个广告： 但是这个网站是美国的： 为什么中国的广告会打到美国去了？并且不止一个网站有这个问题，自己的…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fv2-5deeb1469c23_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&jQuery&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&React&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&程序员&,&isFollowing&:false,&hash&:&086d2ffcb95d&,&uid&:353200,&isOrg&:false,&slug&:&li-yin-cheng-24&,&isFollowed&:false,&description&:&&,&name&:&李银城&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fli-yin-cheng-24&,&avatar&:{&id&:&3c1a4bab55&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&content&:&\u003Cp\u003E自从React\u002FVue等框架流行之后，jQuery被打上了面条式代码的标签，甚至成了“过街老鼠”，好像谁还在用jQuery，谁就还活在旧时代，很多人都争先恐后地拥抱新框架，各大博客网站有很大一部分的博客都在介绍新的框架，争当时代的“弄潮儿”。新框架带来的新的理念，新的开发方式不可否认带来了生产效率，但是jQuery等就应该被打上“旧时代”面条式代码的标签么？\u003C\u002Fp\u003E\u003Cp\u003E我们从一篇文章说起：《\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fa\u002F1752\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EReact.js 的介绍 - 针对了解 jQuery 的工程师（译）\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E》，英文原文是这个《\u003Ca href=\&http:\u002F\\u002F?target=http%3A\\u002Freact-js-introduction-for-people-who-know-just-enough-jquery-to-get-by\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EReact.js Introduction For People Who Know Just Enough jQuery To Get By\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E》， 这篇文章我好久前就看过，现在再把它翻出来，里面对比了下jQuery和React分别实现一个发推的功能，作者用jQuery写着写着代码就乱套了，而用React不管需求多复杂，代码条理依旧很清晰。\u003C\u002Fp\u003E\u003Cp\u003E我们一步步按照原文作者的思路来拆解。\u003C\u002Fp\u003E\u003Ch2\u003E（1）输入个数为0时，发送按钮不可点击\u003C\u002Fh2\u003E\u003Cp\u003E如下图所示，当输入框没有内容时，发推按钮置灰不可点，有内容点才能点。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg data-rawheight=\&280\& src=\&http:\u002F\\u002Fv2-8ed94a62d8a0f97e627f6ad4b29c76fd_b.png\& data-rawwidth=\&822\& class=\&origin_image zh-lightbox-thumb\& width=\&822\& data-original=\&http:\u002F\\u002Fv2-8ed94a62d8a0f97e627f6ad4b29c76fd_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E作者写的代码是这样的：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&c1\&\u003E\u002F\u002F 初始化状态\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&button\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprop\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&disabled\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&c1\&\u003E\u002F\u002F 文本框的值发生变化时\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&textarea\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 只要超过一个字符，就\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eval\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E().\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 按钮可以点击\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&button\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprop\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&disabled\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Efalse\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Eelse\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F否则，按钮不能点击\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&button\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprop\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&disabled\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这个代码本身写得很累赘，首先，既然一开始那个button是disabled的，那就直接在html上写个disabled属性就行了：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eform\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&tweet-box\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etextarea\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&textMsg\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etextarea\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Einput\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Edisabled\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&submit\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&tweet\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&Tweet\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E第二个要控制按钮的状态，其实核心只要一行代码就行了，不需要写那么长：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Elet\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&.tweet-box\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E];\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EtextMsg\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etweet\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Edisabled\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etrigger\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这个代码应该够简洁了吧，而且代码在jQuery和原生之间来回切换，游刃有余。\u003C\u002Fp\u003E\u003Ch2\u003E（2）实现剩余字数功能\u003C\u002Fh2\u003E\u003Cp\u003E如下图所示：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg data-rawheight=\&286\& src=\&http:\u002F\\u002Fv2-5deeb1469c23_b.png\& data-rawwidth=\&836\& class=\&origin_image zh-lightbox-thumb\& width=\&836\& data-original=\&http:\u002F\\u002Fv2-5deeb1469c23_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E这个也好实现：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Elet\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&.tweet-box\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)[\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E],\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$leftWordCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&#left-word-count\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EtextMsg\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 已有字数\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kd\&\u003Elet\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$leftWordCount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E140\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etweet\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Edisabled\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E \n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E（3）添加图片按钮\u003C\u002Fh2\u003E\u003Cp\u003E如下图所示，左下角多了一个选择照片的按钮：\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg data-rawheight=\&328\& src=\&http:\u002F\\u002Fv2-4eaa272c556d71e801c73_b.png\& data-rawwidth=\&984\& class=\&origin_image zh-lightbox-thumb\& width=\&984\& data-original=\&http:\u002F\\u002Fv2-4eaa272c556d71e801c73_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果用户选择了照片，那么可输入字数将会减少23个字符，并且Add Photo文案要变成Photo Added。我们先来看下作者是怎么实现的，如下代码：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EhasClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&is-on\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E))\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EremoveClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&is-on\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&Add Photo\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&span\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E140\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&textarea\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eval\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E().\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Eelse\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EaddClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&is-on\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&? Photo Added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&span\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E140\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E23\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&textarea\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eval\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E().\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E如果代码像作者这样写的话确实是比较乱，而且比较面条式。但是我们可以优雅地实现。首先，选择照片一般会写一个input[type=file]的隐藏输入框盖在上传图标下面：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&upload-container\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eimg\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&upload-icon.png\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ealt\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Espan\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eid\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&add-photo\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003EAdd Photo\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Espan\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Einput\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Etype\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&file\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&photoUpload\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Ediv\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后监听它的change事件，在change事件里面给form套一个类：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EphotoUpload\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&change\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 如果选择了照片则添加一个photo-added的类\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EaddClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 否则去掉\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EremoveClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后就可以来实现文案改变的需求了，把上面#add-photo的span标签添加两个data属性，分别是照片添加和未添加的文案，如下代码所示：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Espan\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eid\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&add-photo\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Edata-added-text\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&Photo Added\&\u003C\u002Fspan\u003E \n
\u003Cspan class=\&na\&\u003Edata-empty-text\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&Add Photo\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Espan\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E通过form的类结合before\u002Fafter伪类控制html上的文案，如下代码所示：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-css\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nn\&\u003E#add-photo\u003C\u002Fspan\u003E\u003Cspan class=\&nd\&\u003E:before\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Econtent\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eattr\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eempty\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E\u003Cspan class=\&nb\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nt\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&nc\&\u003E.photo-added\u003C\u002Fspan\u003E \u003Cspan class=\&nn\&\u003E#add-photo\u003C\u002Fspan\u003E\u003Cspan class=\&nd\&\u003E:before\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Econtent\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003Eattr\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E\u003Cspan class=\&n\&\u003Eadded\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E\u003Cspan class=\&nb\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这样就可以了，我们算是用了一个比较优雅的方式实现了一个文案变化的功能，其中CSS的attr可以兼容到IE9，并且这里html\u002Fcss\u002Fjs相配合，共同完成这个变化的功能，这应该也挺好玩的。\u003C\u002Fp\u003E\u003Cp\u003E剩下一个要减掉23字符的需求，只需要在减掉的时候判断一下：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EtextMsg\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&input\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 已有字数\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kd\&\u003Elet\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etweet\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Edisabled\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&=\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$leftWordCount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&mi\&\u003E140\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EwordsCount\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E-\u003C\u002Fspan\u003E \n
\u003Cspan class=\&c1\&\u003E\u002F\u002F如果已经添加了图片再减掉23个字符\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EhasClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E23\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E));\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E然后在选择图片之后trigger一下，让文字发生变化，如下代码倒数第二行：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&cm\&\u003E\u002F*\u003C\u002Fspan\u003E\n\u003Cspan class=\&cm\&\u003E * @trigger 会触发文字输入框的input事件以更新剩余字数\u003C\u002Fspan\u003E\n\u003Cspan class=\&cm\&\u003E *\u002F\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EphotoUpload\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eon\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&change\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 如果选择了照片则添加一个photo-added的类\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Evalue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elength\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EaddClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \n
\u003Cspan class=\&c1\&\u003E\u002F\u002F 否则去掉\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eform\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E).\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EremoveClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&photo-added\&\u003C\u002Fspan\u003E\u003Cspan class=\&p}
我要回帖
更多关于 赛尔号怎么快速升级 的文章
更多推荐
- ·老挝人怎么看中国人在老挝好挣钱吗,他们对中国人在老挝好挣钱吗了解有多少?
- ·pin码输错3次锁多久10次怎么办？
- ·求教：如何给部分表格加密excel中对单个附表进行加密，设置打开密码？
- ·05345051095属于0534开头的是什么电话号码？
- ·（1+a/n)的n次幂是否存在用定义证明n的开n次方的极限等于1，如存在，用定义证明n的开n次方的极限等于1为多少；a为介于0与1之间的正常数；n取值范围n>1？
- ·赛尔号进入摩尔庄园分子密码卡在摩尔庄园能用吗？
- ·人工学院下载游戏开始新游戏进去以后那个班级...
- ·求个英雄岛新手礼包嘉年华礼包序列号
- ·哪种棋牌游戏最好玩的棋牌游戏呀？
- ·vsdota全图图挂支持6.72f，能过VS...
- ·请问WOW里有这套衣服吗？ 求wow 装备出处插件！
- ·想要摩尔庄园土豆号号的进
- ·我的hp g4 1302tx026tx 能玩极品...
- ·DNF 70级 鬼泣加点 不要复制的 ...
- ·dnf女机械觉醒视频跑的掉吗
- ·可以把dnf加点模拟器器也发给我吗，谢啦！，发完给...
- ·求个烈焰行动激活码的激活码！高分！有的发消息...
- ·上古2 眼球 dnf 12强化卷多少钱到12 要多少钱？
- ·收费dnf解封方法DNF，CF,QQ飞车。加Q
- ·把这个上古卷轴5 2号升级级
- ·dnf上海1找一个dnf师傅怎么加疲劳，可以带我的，本...
- ·三多棋牌游戏平台台上哪里去找呀，谁知道的说一...
- ·叶网口袋精灵22 7.2cc女法师 和 副 ...
- ·dnf男格斗加点转什么花钱不多，刷图又快？
- ·街头篮球技能槽有时候技能槽怎么那么便宜？
- ·魔域桃源BS是不是在规定的时间才会有
- ·本人售迪奥雪精灵灵宠物蛋！要的私聊本人...价格密谈！
- ·100到200元左右的dota游戏鼠标推荐荐
- ·qq堂为什么不能安装我的QQ堂号上不了
- ·我的超级跑跑视频怎摸跳不了
- ·我的超级跑跑谁给我个号怎摸跳不了
- ·QQ飞车微博达人背景薄达人怎么弄
- ·打羊城可以得到11平台声望怎么得到吗
- ·地下城与勇士天空套合天空技巧
- ·寻仙时装合成怎样砸时装？
