.

本来是英文版的,我改了一点,提示什么的都是中文的了,</p>

从这里下载 jquery.pstrength.js 强度验证插件!然后在网页中引用jquery文件和这个插件</p>

XML/HTML代码

然后使用以下函数

JavaScript代码
  1. jQuery(document).ready(function(){
  2. jQuery(‘#password1’).pstrength();
  3. });

#password是你的密码框ID

根据你的情况不同,你可以自定义你的密码强度,我定义的是这样的

JavaScript代码
  1. $.extend($.fn, {
  2. pstrength: function(options) {
  3. var options = $.extend({
  4. verdects: [“很不安全”, “不安全", “一般", “安全的", “非常安全”],
  5. colors: [“#f00”, “#c06”, “#f60”, “#3c0”, “#3f0”],
  6. scores: [10, 15, 30, 40],
  7. common: [“password”, “sex”, “god”, “123456”, “123”, “liverpool”, “letmein”, “qwerty”, “monkey”],
  8. minchar: 6
  9. }, options);

效果如下:</strong>

2.

jQuery密码强度检验插件</h2>

pass_strength

一款不错的密码强度插件!</p>

1 jquery.pstrength插件和jquery文件

2 载入jquery文件和jquery.pstrength文件

3 HTML加入密码输入框,id=”user_password”:

  1. 密码:&lt;input type=”password” id=”user_password” name=”user_password” />

4 css:

  1. .pstrength-minchar {
  2. font-size : 10px;
  3. }
  4. input {
  5. width:180px;
  6. height:12px;
  7. line-height:12px;
  8. padding:4px 0px;
  9. border: #cfcfcf 1px solid;
  10. color: #585858;
  11. }

演示地址

插件官方地址:<a href=”http://plugins.jquery.com/project/pstrength” target=”_blank”>Ajax Password Strength Meter Script


3.

用jquery写了一个简单的密码强度测试工具

最近正在用功的学习jQuery,在琢磨了不少别人写的功能之后,也开始尝试着自己开发一些功能。今天我做了一个简单的密码强度测试工具。</p>

这可功能的作用可以看下面这个截图。我已经在多种浏览器中测试过它了。</p>

闲话不提,上代码:</p>

  1. 无标题文档&lt;/title> </li> <li><script type="text/javascript" src="common/xheditor/jquery-1.3.2.min.js"></script> </li> <li><script type="text/javascript" src="jquery.popbox.js"></script> </li> <li><script type="text/javascript"> </li> <li>$(document).ready(function(){ </li> <li>$("form:eq(0) input:eq(0)").focus(); </li> <li>$("input[type=password][name=password1]").focus(function(){ </li> <li>var position=$(this).offset() </li> <li>var $pwStrength=$(' <div id="pwStrength"></div> <p>').appendTo("body"); </li> <li>$pwStrength.css({"position":"absolute","width":120,"height":12,"left":position.left,"top":position.top+28,"background":"#FFFF80","fontSize":"10px","line-height":"12px","color":"#ffffff"}); </li> <li>$('<span>弱&lt;/span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#ff0000","position":"absolute","padding-left":"14px"}).appendTo($pwStrength); </li> <li>$('<span>中&lt;/span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#FF9900","position":"absolute","padding-left":"54px"}).appendTo($pwStrength); </li> <li>$('<span>强&lt;/span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#008000","position":"absolute","padding-left":"94px"}).appendTo($pwStrength); </li> <li>$('<span></span>').css({"width":39,"height":12,"display":"block","flowover":"hidden","position":"absolute","margin-left":"40px","border-left":"1px solid #fff","border-right":"1px solid #fff"}).appendTo($pwStrength); </li> <li>}) </li> <li>.keyup(function(){var pwd=$(this).val();$("#pwStrength span:lt(3)").css({"display":"none"}); </li> <li>var CharMode=function(iN){if(iN>=48&&iN<=57)return 1;if(iN>=65&&iN<=90)return 2;if(iN>=97&&iN<=122)return 4;else return 8;} </li> <li>var bitTotal=function(num){modes=0;for (i=0;i<5;i++){if(num & 1) modes++;num>>>=1;}return modes;} </li> <li>var checkStrong=function (sPW){if(sPW.length<=5)return 0;Modes=0;for (i=0;i<sPW.length;i++){Modes|=CharMode(sPW.charCodeAt(i)); }return bitTotal(Modes);} </li> <li>if(pwd!=''&&pwd!=null){var level=checkStrong(pwd);if(level==0)$("#pwStrength span:eq(0)").css({"display":"block"});if(level==1)$("#pwStrength span:eq(1)").css({"display":"block"});if(level==2)$("#pwStrength span:eq(2)").css({"display":"block"});}}) </li> <li>.blur(function(){$("#pwStrength").remove()}); </li> <li>}) </li> <li></script> </li> <li> <style type="text/css"> </li> <li>body{font-size:12px;line-height:20px;text-align:left;} </li> <li>th{text-align:right;color:#336688;font-weight:normal;} </li> <li>input{border-right:1px solid #e1e5e8;border-bottom:1px solid #e1e5e8;border-left:1px solid #999999;border-top:1px solid #999999;background:#f1f2f3;font-size:12px;line-height:15px;height:17px;color:#666666;padding:1px 2px;} </li> <li>button{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #666666;border-bottom:1px solid #666666;background:#999999;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;} </li> <li>button.submit{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #003366;border-bottom:1px solid #003366;background:#336699;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;} </li> <li></style> </li> <li></head> </li> <li><body> </li> <li> <form> </li> <li> <table border="0" cellpadding="3" cellspacing="0"> </li> <li> <tr> <th><label for="username">请输入用户名</label></th> <td> </li> <li><input type="text" name="username" size="19" maxlength="16"/></td> </tr> </li> <li> <tr> <th><label for="password1">请输入密码&lt;/label></th> <td> </li> <li><input type="password" name="password1" value="" size="19" maxlength="18" /></td> </tr> </li> <li> <tr> <th><label for="password2">请再次输入密码&lt;/label></th> <td> </li> <li><input type="password" name="password2" value="" size="19" maxlength="18" /></td> </tr> </li> <li> <tr> <th> </th> <td><button type="submit" class="submit">提交</button> <button type="reset">重置</button></td> </tr> </li> <li></table> </li> <li></form> </li> <li></body> </li> <li></html> </li> </ol> </div> <p></p><!-- Crayon Syntax Highlighter v_2.7.2_beta --> <div id="crayon-594e6f57d3a35844263545" class="crayon-syntax crayon-theme-eclipse crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> <div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span> <div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-mixed-highlight" title="含多种语言"></span><div class="crayon-button crayon-nums-button" title="切换是否显示行编号"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="纯文本显示代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="切换自动换行"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="点击展开代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="复制代码"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="在新窗口中显示代码"><div class="crayon-button-icon"></div></div></div></div> <div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div> <div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档&amp;lt;/title> <script type="text/javascript" src="common/xheditor/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.popbox.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("form:eq(0) input:eq(0)").focus(); $("input[type=password][name=password1]").focus(function(){ var position=$(this).offset() var $pwStrength=$('<div id="pwStrength"></div>').appendTo("body"); $pwStrength.css({"position":"absolute","width":120,"height":12,"left":position.left,"top":position.top+28,"background":"#FFFF80","fontSize":"10px","line-height":"12px","color":"#ffffff"}); $('<span>弱&amp;lt;/span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#ff0000","position":"absolute","padding-left":"14px"}).appendTo($pwStrength); $('<span>中&amp;lt;/span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#FF9900","position":"absolute","padding-left":"54px"}).appendTo($pwStrength); $('<span>强&amp;lt;/span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#008000","position":"absolute","padding-left":"94px"}).appendTo($pwStrength); $('<span></span>').css({"width":39,"height":12,"display":"block","flowover":"hidden","position":"absolute","margin-left":"40px","border-left":"1px solid #fff","border-right":"1px solid #fff"}).appendTo($pwStrength); }) .keyup(function(){var pwd=$(this).val();$("#pwStrength span:lt(3)").css({"display":"none"}); var CharMode=function(iN){if(iN>=48&&iN<=57)return 1;if(iN>=65&&iN<=90)return 2;if(iN>=97&&iN<=122)return 4;else return 8;} var bitTotal=function(num){modes=0;for (i=0;i<5;i++){if(num & 1) modes++;num>>>=1;}return modes;} var checkStrong=function (sPW){if(sPW.length<=5)return 0;Modes=0;for (i=0;i<sPW.length;i++){Modes|=CharMode(sPW.charCodeAt(i)); }return bitTotal(Modes);} if(pwd!=''&&pwd!=null){var level=checkStrong(pwd);if(level==0)$("#pwStrength span:eq(0)").css({"display":"block"});if(level==1)$("#pwStrength span:eq(1)").css({"display":"block"});if(level==2)$("#pwStrength span:eq(2)").css({"display":"block"});}}) .blur(function(){$("#pwStrength").remove()}); }) </script> <style type="text/css"> body{font-size:12px;line-height:20px;text-align:left;} th{text-align:right;color:#336688;font-weight:normal;} input{border-right:1px solid #e1e5e8;border-bottom:1px solid #e1e5e8;border-left:1px solid #999999;border-top:1px solid #999999;background:#f1f2f3;font-size:12px;line-height:15px;height:17px;color:#666666;padding:1px 2px;} button{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #666666;border-bottom:1px solid #666666;background:#999999;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;} button.submit{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #003366;border-bottom:1px solid #003366;background:#336699;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;} </style> </head> <body> <form> <table border="0" cellpadding="3" cellspacing="0"> <tr><th><label for="username">请输入用户名</label></th><td> <input type="text" name="username" size="19" maxlength="16"/></td></tr> <tr><th><label for="password1">请输入密码&amp;lt;/label></th><td> <input type="password" name="password1" value="" size="19" maxlength="18" /></td></tr> <tr><th><label for="password2">请再次输入密码&amp;lt;/label></th><td> <input type="password" name="password2" value="" size="19" maxlength="18" /></td></tr> <tr><th>&nbsp;</th><td><button type="submit" class="submit">提交</button> <button type="reset">重置</button></td></tr> </table> </form> </body> </html></textarea></div> <div class="crayon-main" style=""> <table class="crayon-table"> <tr class="crayon-row"> <td class="crayon-nums " data-settings="show"> <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-2">2</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-4">4</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-6">6</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-8">8</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-10">10</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-12">12</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-14">14</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-16">16</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-18">18</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-20">20</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-22">22</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-24">24</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-26">26</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-28">28</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-30">30</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-32">32</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-34">34</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-36">36</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-38">38</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-40">40</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-42">42</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-44">44</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-46">46</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-594e6f57d3a35844263545-48">48</div><div class="crayon-num" data-line="crayon-594e6f57d3a35844263545-49">49</div></div> </td> <td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-594e6f57d3a35844263545-1"><span class="crayon-o"><</span><span class="crayon-o">!</span><span class="crayon-e">DOCTYPE </span><span class="crayon-e">html </span><span class="crayon-m">PUBLIC</span><span class="crayon-h"> </span><span class="crayon-s">"-//W3C//DTD XHTML 1.0 Strict//EN"</span><span class="crayon-h"> </span><span class="crayon-s">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-2"><span class="crayon-o"><</span><span class="crayon-e">html </span><span class="crayon-v">xmlns</span><span class="crayon-o">=</span><span class="crayon-s">"http://www.w3.org/1999/xhtml"</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-3"><span class="crayon-o"><</span><span class="crayon-v">head</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-4"><span class="crayon-o"><</span><span class="crayon-e">meta </span><span class="crayon-v">http</span><span class="crayon-o">-</span><span class="crayon-v">equiv</span><span class="crayon-o">=</span><span class="crayon-s">"Content-Type"</span><span class="crayon-h"> </span><span class="crayon-v">content</span><span class="crayon-o">=</span><span class="crayon-s">"text/html; charset=gb2312"</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-5"><span class="crayon-o"><</span><span class="crayon-v">title</span><span class="crayon-o">></span>无标题文档<span class="crayon-o">&</span><span class="crayon-v">amp</span><span class="crayon-sy">;</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-e">title</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-6"><span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"common/xheditor/jquery-1.3.2.min.js"</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-7"><span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"jquery.popbox.js"</span><span class="crayon-o">></span><span class="crayon-ta"></script></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-8"><span class="crayon-ta"><script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-9"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">document</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">ready</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-10"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"form:eq(0) input:eq(0)"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">focus</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-11"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"input[type=password][name=password1]"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">focus</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-12"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">position</span><span class="crayon-o">=</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">offset</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-13"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-v">pwStrength</span><span class="crayon-o">=</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'<div id="pwStrength"></div>'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">appendTo</span><span class="crayon-sy">(</span><span class="crayon-s">"body"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-14"><span class="crayon-sy">$</span><span class="crayon-v">pwStrength</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-s">"position"</span><span class="crayon-o">:</span><span class="crayon-s">"absolute"</span><span class="crayon-sy">,</span><span class="crayon-s">"width"</span><span class="crayon-o">:</span><span class="crayon-cn">120</span><span class="crayon-sy">,</span><span class="crayon-s">"height"</span><span class="crayon-o">:</span><span class="crayon-cn">12</span><span class="crayon-sy">,</span><span class="crayon-s">"left"</span><span class="crayon-o">:</span><span class="crayon-v">position</span><span class="crayon-sy">.</span><span class="crayon-v">left</span><span class="crayon-sy">,</span><span class="crayon-s">"top"</span><span class="crayon-o">:</span><span class="crayon-v">position</span><span class="crayon-sy">.</span><span class="crayon-v">top</span><span class="crayon-o">+</span><span class="crayon-cn">28</span><span class="crayon-sy">,</span><span class="crayon-s">"background"</span><span class="crayon-o">:</span><span class="crayon-s">"#FFFF80"</span><span class="crayon-sy">,</span><span class="crayon-s">"fontSize"</span><span class="crayon-o">:</span><span class="crayon-s">"10px"</span><span class="crayon-sy">,</span><span class="crayon-s">"line-height"</span><span class="crayon-o">:</span><span class="crayon-s">"12px"</span><span class="crayon-sy">,</span><span class="crayon-s">"color"</span><span class="crayon-o">:</span><span class="crayon-s">"#ffffff"</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-15"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'<span>弱&amp;lt;/span>'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-s">"width"</span><span class="crayon-o">:</span><span class="crayon-cn">26</span><span class="crayon-sy">,</span><span class="crayon-s">"height"</span><span class="crayon-o">:</span><span class="crayon-cn">12</span><span class="crayon-sy">,</span><span class="crayon-s">"display"</span><span class="crayon-o">:</span><span class="crayon-s">"none"</span><span class="crayon-sy">,</span><span class="crayon-s">"flowover"</span><span class="crayon-o">:</span><span class="crayon-s">"hidden"</span><span class="crayon-sy">,</span><span class="crayon-s">"background"</span><span class="crayon-o">:</span><span class="crayon-s">"#ff0000"</span><span class="crayon-sy">,</span><span class="crayon-s">"position"</span><span class="crayon-o">:</span><span class="crayon-s">"absolute"</span><span class="crayon-sy">,</span><span class="crayon-s">"padding-left"</span><span class="crayon-o">:</span><span class="crayon-s">"14px"</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">appendTo</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-v">pwStrength</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-16"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'<span>中&amp;lt;/span>'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-s">"width"</span><span class="crayon-o">:</span><span class="crayon-cn">26</span><span class="crayon-sy">,</span><span class="crayon-s">"height"</span><span class="crayon-o">:</span><span class="crayon-cn">12</span><span class="crayon-sy">,</span><span class="crayon-s">"display"</span><span class="crayon-o">:</span><span class="crayon-s">"none"</span><span class="crayon-sy">,</span><span class="crayon-s">"flowover"</span><span class="crayon-o">:</span><span class="crayon-s">"hidden"</span><span class="crayon-sy">,</span><span class="crayon-s">"background"</span><span class="crayon-o">:</span><span class="crayon-s">"#FF9900"</span><span class="crayon-sy">,</span><span class="crayon-s">"position"</span><span class="crayon-o">:</span><span class="crayon-s">"absolute"</span><span class="crayon-sy">,</span><span class="crayon-s">"padding-left"</span><span class="crayon-o">:</span><span class="crayon-s">"54px"</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">appendTo</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-v">pwStrength</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-17"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'<span>强&amp;lt;/span>'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-s">"width"</span><span class="crayon-o">:</span><span class="crayon-cn">26</span><span class="crayon-sy">,</span><span class="crayon-s">"height"</span><span class="crayon-o">:</span><span class="crayon-cn">12</span><span class="crayon-sy">,</span><span class="crayon-s">"display"</span><span class="crayon-o">:</span><span class="crayon-s">"none"</span><span class="crayon-sy">,</span><span class="crayon-s">"flowover"</span><span class="crayon-o">:</span><span class="crayon-s">"hidden"</span><span class="crayon-sy">,</span><span class="crayon-s">"background"</span><span class="crayon-o">:</span><span class="crayon-s">"#008000"</span><span class="crayon-sy">,</span><span class="crayon-s">"position"</span><span class="crayon-o">:</span><span class="crayon-s">"absolute"</span><span class="crayon-sy">,</span><span class="crayon-s">"padding-left"</span><span class="crayon-o">:</span><span class="crayon-s">"94px"</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">appendTo</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-v">pwStrength</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-18"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'<span></span>'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-s">"width"</span><span class="crayon-o">:</span><span class="crayon-cn">39</span><span class="crayon-sy">,</span><span class="crayon-s">"height"</span><span class="crayon-o">:</span><span class="crayon-cn">12</span><span class="crayon-sy">,</span><span class="crayon-s">"display"</span><span class="crayon-o">:</span><span class="crayon-s">"block"</span><span class="crayon-sy">,</span><span class="crayon-s">"flowover"</span><span class="crayon-o">:</span><span class="crayon-s">"hidden"</span><span class="crayon-sy">,</span><span class="crayon-s">"position"</span><span class="crayon-o">:</span><span class="crayon-s">"absolute"</span><span class="crayon-sy">,</span><span class="crayon-s">"margin-left"</span><span class="crayon-o">:</span><span class="crayon-s">"40px"</span><span class="crayon-sy">,</span><span class="crayon-s">"border-left"</span><span class="crayon-o">:</span><span class="crayon-s">"1px solid #fff"</span><span class="crayon-sy">,</span><span class="crayon-s">"border-right"</span><span class="crayon-o">:</span><span class="crayon-s">"1px solid #fff"</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">appendTo</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-v">pwStrength</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-19"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-20"><span class="crayon-sy">.</span><span class="crayon-e">keyup</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">pwd</span><span class="crayon-o">=</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">val</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#pwStrength span:lt(3)"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-s">"display"</span><span class="crayon-o">:</span><span class="crayon-s">"none"</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-21"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">CharMode</span><span class="crayon-o">=</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-st">iN</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-st">iN</span><span class="crayon-o">>=</span><span class="crayon-cn">48</span><span class="crayon-o">&&</span><span class="crayon-st">iN</span><span class="crayon-o"><=</span><span class="crayon-cn">57</span><span class="crayon-sy">)</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-st">iN</span><span class="crayon-o">>=</span><span class="crayon-cn">65</span><span class="crayon-o">&&</span><span class="crayon-st">iN</span><span class="crayon-o"><=</span><span class="crayon-cn">90</span><span class="crayon-sy">)</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-cn">2</span><span class="crayon-sy">;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-st">iN</span><span class="crayon-o">>=</span><span class="crayon-cn">97</span><span class="crayon-o">&&</span><span class="crayon-st">iN</span><span class="crayon-o"><=</span><span class="crayon-cn">122</span><span class="crayon-sy">)</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-cn">4</span><span class="crayon-sy">;</span><span class="crayon-st">else</span><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-cn">8</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-22"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">bitTotal</span><span class="crayon-o">=</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">num</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-v">modes</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">i</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o"><</span><span class="crayon-cn">5</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">num</span><span class="crayon-h"> </span><span class="crayon-o">&</span><span class="crayon-h"> </span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-v">modes</span><span class="crayon-o">++</span><span class="crayon-sy">;</span><span class="crayon-v">num</span><span class="crayon-o">>>></span><span class="crayon-o">=</span><span class="crayon-cn">1</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">modes</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-23"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">checkStrong</span><span class="crayon-o">=</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">sPW</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">sPW</span><span class="crayon-sy">.</span><span class="crayon-v">length</span><span class="crayon-o"><=</span><span class="crayon-cn">5</span><span class="crayon-sy">)</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">Modes</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-st">for</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">i</span><span class="crayon-o">=</span><span class="crayon-cn">0</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o"><</span><span class="crayon-v">sPW</span><span class="crayon-sy">.</span><span class="crayon-v">length</span><span class="crayon-sy">;</span><span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-v">Modes</span><span class="crayon-o">|=</span><span class="crayon-e">CharMode</span><span class="crayon-sy">(</span><span class="crayon-v">sPW</span><span class="crayon-sy">.</span><span class="crayon-e">charCodeAt</span><span class="crayon-sy">(</span><span class="crayon-v">i</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-sy">}</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-e">bitTotal</span><span class="crayon-sy">(</span><span class="crayon-v">Modes</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-24"><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">pwd</span><span class="crayon-o">!=</span><span class="crayon-s">''</span><span class="crayon-o">&&</span><span class="crayon-v">pwd</span><span class="crayon-o">!=</span><span class="crayon-t">null</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">level</span><span class="crayon-o">=</span><span class="crayon-e">checkStrong</span><span class="crayon-sy">(</span><span class="crayon-v">pwd</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">level</span><span class="crayon-o">==</span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#pwStrength span:eq(0)"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-s">"display"</span><span class="crayon-o">:</span><span class="crayon-s">"block"</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">level</span><span class="crayon-o">==</span><span class="crayon-cn">1</span><span class="crayon-sy">)</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#pwStrength span:eq(1)"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-s">"display"</span><span class="crayon-o">:</span><span class="crayon-s">"block"</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-v">level</span><span class="crayon-o">==</span><span class="crayon-cn">2</span><span class="crayon-sy">)</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#pwStrength span:eq(2)"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-s">"display"</span><span class="crayon-o">:</span><span class="crayon-s">"block"</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-25"><span class="crayon-sy">.</span><span class="crayon-e">blur</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#pwStrength"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">remove</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-26"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-27"><span class="crayon-ta"></script></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-28"><span class="crayon-ta"><style </span><span class="crayon-e ">type</span><span class="crayon-k ">="text/css"></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-29"><span class="crayon-k ">body</span><span class="crayon-sy">{</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-i ">12px</span><span class="crayon-sy">;</span><span class="crayon-e ">line-height</span><span class="crayon-sy">:</span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-i ">left</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-30"><span class="crayon-k ">th</span><span class="crayon-sy">{</span><span class="crayon-e ">text-align</span><span class="crayon-sy">:</span><span class="crayon-i ">right</span><span class="crayon-sy">;</span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-i ">#336688</span><span class="crayon-sy">;</span><span class="crayon-e ">font-weight</span><span class="crayon-sy">:</span><span class="crayon-i ">normal</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-31"><span class="crayon-k ">input</span><span class="crayon-sy">{</span><span class="crayon-e ">border-right</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#e1e5e8</span><span class="crayon-sy">;</span><span class="crayon-e ">border-bottom</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#e1e5e8</span><span class="crayon-sy">;</span><span class="crayon-e ">border-left</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#999999</span><span class="crayon-sy">;</span><span class="crayon-e ">border-top</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#999999</span><span class="crayon-sy">;</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-i ">#f1f2f3</span><span class="crayon-sy">;</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-i ">12px</span><span class="crayon-sy">;</span><span class="crayon-e ">line-height</span><span class="crayon-sy">:</span><span class="crayon-i ">15px</span><span class="crayon-sy">;</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-i ">17px</span><span class="crayon-sy">;</span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-i ">#666666</span><span class="crayon-sy">;</span><span class="crayon-e ">padding</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">2px</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-32"><span class="crayon-k ">button</span><span class="crayon-sy">{</span><span class="crayon-e ">border-left</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#d4d6d8</span><span class="crayon-sy">;</span><span class="crayon-e ">border-top</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#d4d6d8</span><span class="crayon-sy">;</span><span class="crayon-e ">border-right</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#666666</span><span class="crayon-sy">;</span><span class="crayon-e ">border-bottom</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#666666</span><span class="crayon-sy">;</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-i ">#999999</span><span class="crayon-sy">;</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-i ">12px</span><span class="crayon-sy">;</span><span class="crayon-e ">line-height</span><span class="crayon-sy">:</span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span><span class="crayon-e ">padding</span><span class="crayon-sy">:</span><span class="crayon-i ">0</span><span class="crayon-h"> </span><span class="crayon-i ">8px</span><span class="crayon-sy">;</span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-i ">#ffffff</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-33"><span class="crayon-k ">button.submit</span><span class="crayon-sy">{</span><span class="crayon-e ">border-left</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#d4d6d8</span><span class="crayon-sy">;</span><span class="crayon-e ">border-top</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#d4d6d8</span><span class="crayon-sy">;</span><span class="crayon-e ">border-right</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#003366</span><span class="crayon-sy">;</span><span class="crayon-e ">border-bottom</span><span class="crayon-sy">:</span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-h"> </span><span class="crayon-i ">#003366</span><span class="crayon-sy">;</span><span class="crayon-e ">background</span><span class="crayon-sy">:</span><span class="crayon-i ">#336699</span><span class="crayon-sy">;</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-i ">12px</span><span class="crayon-sy">;</span><span class="crayon-e ">line-height</span><span class="crayon-sy">:</span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span><span class="crayon-e ">height</span><span class="crayon-sy">:</span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span><span class="crayon-e ">padding</span><span class="crayon-sy">:</span><span class="crayon-i ">0</span><span class="crayon-h"> </span><span class="crayon-i ">8px</span><span class="crayon-sy">;</span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-i ">#ffffff</span><span class="crayon-sy">;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-34"><span class="crayon-ta"></style></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-35"><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">head</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-36"><span class="crayon-o"><</span><span class="crayon-v">body</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-37"><span class="crayon-o"><</span><span class="crayon-v">form</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-38"><span class="crayon-o"><</span><span class="crayon-e">table </span><span class="crayon-v">border</span><span class="crayon-o">=</span><span class="crayon-s">"0"</span><span class="crayon-h"> </span><span class="crayon-v">cellpadding</span><span class="crayon-o">=</span><span class="crayon-s">"3"</span><span class="crayon-h"> </span><span class="crayon-v">cellspacing</span><span class="crayon-o">=</span><span class="crayon-s">"0"</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-39"><span class="crayon-o"><</span><span class="crayon-v">tr</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-v">th</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-e">label </span><span class="crayon-st">for</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-o">></span>请输入用户名<span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">th</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-v">td</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-40"><span class="crayon-o"><</span><span class="crayon-e">input </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-h"> </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-h"> </span><span class="crayon-v">size</span><span class="crayon-o">=</span><span class="crayon-s">"19"</span><span class="crayon-h"> </span><span class="crayon-v">maxlength</span><span class="crayon-o">=</span><span class="crayon-s">"16"</span><span class="crayon-o">/</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">td</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">tr</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-41"><span class="crayon-o"><</span><span class="crayon-v">tr</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-v">th</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-e">label </span><span class="crayon-st">for</span><span class="crayon-o">=</span><span class="crayon-s">"password1"</span><span class="crayon-o">></span>请输入密码<span class="crayon-o">&</span><span class="crayon-v">amp</span><span class="crayon-sy">;</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">th</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-v">td</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-42"><span class="crayon-o"><</span><span class="crayon-e">input </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"password"</span><span class="crayon-h"> </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"password1"</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-s">""</span><span class="crayon-h"> </span><span class="crayon-v">size</span><span class="crayon-o">=</span><span class="crayon-s">"19"</span><span class="crayon-h"> </span><span class="crayon-v">maxlength</span><span class="crayon-o">=</span><span class="crayon-s">"18"</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">td</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">tr</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-43"><span class="crayon-o"><</span><span class="crayon-v">tr</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-v">th</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-e">label </span><span class="crayon-st">for</span><span class="crayon-o">=</span><span class="crayon-s">"password2"</span><span class="crayon-o">></span>请再次输入密码<span class="crayon-o">&</span><span class="crayon-v">amp</span><span class="crayon-sy">;</span><span class="crayon-v">lt</span><span class="crayon-sy">;</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">th</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-v">td</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-44"><span class="crayon-o"><</span><span class="crayon-e">input </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"password"</span><span class="crayon-h"> </span><span class="crayon-v">name</span><span class="crayon-o">=</span><span class="crayon-s">"password2"</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-s">""</span><span class="crayon-h"> </span><span class="crayon-v">size</span><span class="crayon-o">=</span><span class="crayon-s">"19"</span><span class="crayon-h"> </span><span class="crayon-v">maxlength</span><span class="crayon-o">=</span><span class="crayon-s">"18"</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">td</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">tr</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-45"><span class="crayon-o"><</span><span class="crayon-v">tr</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-v">th</span><span class="crayon-o">></span><span class="crayon-o">&</span><span class="crayon-v">nbsp</span><span class="crayon-sy">;</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">th</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-v">td</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-e">button </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"submit"</span><span class="crayon-h"> </span><span class="crayon-t">class</span><span class="crayon-o">=</span><span class="crayon-s">"submit"</span><span class="crayon-o">></span>提交<span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">button</span><span class="crayon-o">></span><span class="crayon-h"> </span><span class="crayon-o"><</span><span class="crayon-e">button </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"reset"</span><span class="crayon-o">></span>重置<span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">button</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">td</span><span class="crayon-o">></span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">tr</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-46"><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">table</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-47"><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">form</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-594e6f57d3a35844263545-48"><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">body</span><span class="crayon-o">></span></div><div class="crayon-line" id="crayon-594e6f57d3a35844263545-49"><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">html</span><span class="crayon-o">></span></div></div></td> </tr> </table> </div> </div> <!-- [Format Time: 0.0518 seconds] --> <p></p> <p>你也可以把那段javascript拿出来放在一个独立的js文件里,然后再链接到网页里也可以的。</p></p> <p>那个$(document).ready(function(){})里的第一句代码意思是说:一载入就把光标定位到网页中第一个表单的第一个输入项上。</p></p> <p>然后再找到一个输入域input,type=”password”<br /> name=”password1″。至所以要这样写,因为在注册页里,往往就是有两个密码输入域,第一个name=”password1″第二个名<br /> 为"password2″,用来重复输入密码。另外呢,在登录页里也有一个密码输入域,但是它的name一般是”password”,而不会是其它。所以<br /> 哪怕是网页中每一页都插入了这段js,它只能在注册页里起作用;$(“input[type=password][name=password1]”)能<br /> 抓到想要的东西。</p></p> <p>最近我在啃读《网页重构》这本书,努力在尝试提高网页的可读性,甚至希望自己做的网页对盲人来说也没有障碍。我发现在把那个“请输入用户名”<br /> 用&lt;label>包起来,并加上for的属性,可以让盲人的读屏器工作容易。另外,把每个表单的提交按钮的颜色和其它按钮的颜色区分开,也可<br /> 以增加网页的可读性。</p></p> <div class="open_social_box share_box"><div class="share_button share_icon_weibo" onclick="share_button_click('http://v.t.sina.com.cn/share/share.php?url=%URL%&title=%TITLE%&pic=%PIC%&appkey=&ralateUid=&language=zh_cn&searchPic=false',event)" title="分享到微博"></div><div class="share_button share_icon_qqzone" onclick="share_button_click('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=%URL%&title=%TITLE%&desc=&summary=&site=&pics=%PIC%',event)" title="分享到QQ空间"></div><div class="share_button share_icon_qqweibo" onclick="share_button_click('http://share.v.t.qq.com/index.php?c=share&a=index&url=%URL%&title=%TITLE%&pic=%PIC%&appkey=',event)" title="分享到QQ微博"></div><div class="share_button share_icon_youdao" onclick="share_button_click('http://note.youdao.com/memory/?url=%URL%&title=%TITLE%&sumary=&pic=%PIC%&product=',event)" title="分享到网易有道笔记"></div><div class="share_button share_icon_wechat" onclick="share_button_click('QRCODE',event)" title="分享到微信"></div><div class="share_button share_icon_twitter" onclick="share_button_click('http://twitter.com/home/?status=%TITLE%:%URL%',event)" title="分享到 Twitter"></div><div class="share_button share_icon_facebook" onclick="share_button_click('http://www.facebook.com/sharer.php?u=%URL%&t=%TITLE%',event)" title="分享到 Facebook"></div><div class="open_social_qrcode" onclick="jQuery(this).hide();"></div></div> <div id='jp-relatedposts' class='jp-relatedposts' > <h3 class="jp-relatedposts-headline"><em>相关</em></h3> </div> </section> </article> <!-- / blog box--> <div class='entry commententry'> <div class="clearfix"></div> <div id="comments" class="rt_comments rt_form"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2009/12/21/%E5%87%A0%E4%B8%AAjquery%E9%AA%8C%E8%AF%81%E5%AF%86%E7%A0%81%E5%BC%BA%E5%BA%A6%E7%9A%84%E6%8F%92%E4%BB%B6/?lang=zh-hans#respond" style="display:none;">Cancel reply</a></small></h3> <form action="http://www.sealyu.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"> <div class="open_social_box login_box"></div><p class="comment-notes"><span id="email-notes">电子邮件地址不会被公开。</span> 必填项已用<span class="required">*</span>标注</p><div class="text-boxes"><ul><li><textarea tabindex="4" class="comment_textarea showtextback" rows="10" id="comment" name="comment">Comment *</textarea></li></ul></div><div class="clear space"></div><div class="text-boxes"><ul><li class="box three first comment-form-author"><input id="author" name="author" class="showtextback" type="text" value="Name *" size="30" /></li> <li class="box three comment-form-email"><input id="email" name="email" class="showtextback" type="text" value="Email *" size="30" /></li> <li class="box three last comment-form-url "><input id="url" name="url" class="showtextback" type="text" value="Website" size="30" /></li> </ul></div><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='695' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> <noscript><input type="hidden" name="JS04X7" value="NS1" /></noscript> <noscript><p><strong>Currently you have JavaScript disabled. In order to post comments, please make sure JavaScript and Cookies are enabled, and reload the page.</strong> <a href="http://enable-javascript.com/" rel="nofollow external" >Click here for instructions on how to enable JavaScript in your browser.</a></p></noscript> <p class="comment-subscription-form"><input type="checkbox" name="subscribe_comments" id="subscribe_comments" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-label" for="subscribe_comments">通过邮件通知我后续评论</label></p><p class="comment-subscription-form"><input type="checkbox" name="subscribe_blog" id="subscribe_blog" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-blog-label" for="subscribe_blog">通过邮件通知我有新文章</label></p> <input type="hidden" name="icl_comment_language" value="zh-hans" /> </form> </div><!-- #respond --> </div><!-- #comments --> </div> </div> </section><!-- / end section .content --> <!-- section .sidebar --> <section class="sidebar right sticky "> <div class="box box_layout clearfix column_class widget widget_categories"><div class="caption"><h3 class="featured_article_title">Category</h3></div><div class="space margin-b20"></div> <ul> <li class="cat-item cat-item-63"><a href="http://www.sealyu.com/category/apple/?lang=zh-hans" >Apple</a> </li> <li class="cat-item cat-item-112"><a href="http://www.sealyu.com/category/bigdata/?lang=zh-hans" >BigData</a> </li> <li class="cat-item cat-item-39"><a href="http://www.sealyu.com/category/css/?lang=zh-hans" >CSS</a> </li> <li class="cat-item cat-item-49"><a href="http://www.sealyu.com/category/ejb/?lang=zh-hans" >EJB</a> </li> <li class="cat-item cat-item-71"><a href="http://www.sealyu.com/category/guitar/?lang=zh-hans" >Guitar</a> </li> <li class="cat-item cat-item-69"><a href="http://www.sealyu.com/category/health-care/?lang=zh-hans" >Health Care</a> </li> <li class="cat-item cat-item-53"><a href="http://www.sealyu.com/category/hibernate/?lang=zh-hans" >Hibernate</a> </li> <li class="cat-item cat-item-65"><a href="http://www.sealyu.com/category/iphone/?lang=zh-hans" >iphone</a> </li> <li class="cat-item cat-item-43"><a href="http://www.sealyu.com/category/eclipse-swtjface-rcp/?lang=zh-hans" >Java IDE</a> </li> <li class="cat-item cat-item-38"><a href="http://www.sealyu.com/category/javascript/?lang=zh-hans" >Javascript</a> </li> <li class="cat-item cat-item-41"><a href="http://www.sealyu.com/category/java%e5%9f%ba%e7%a1%80/?lang=zh-hans" >Java基础</a> </li> <li class="cat-item cat-item-67"><a href="http://www.sealyu.com/category/jquery/?lang=zh-hans" >JQuery</a> </li> <li class="cat-item cat-item-42"><a href="http://www.sealyu.com/category/linux/?lang=zh-hans" >Linux</a> </li> <li class="cat-item cat-item-61"><a href="http://www.sealyu.com/category/maven/?lang=zh-hans" >Maven</a> </li> <li class="cat-item cat-item-59"><a href="http://www.sealyu.com/category/php/?lang=zh-hans" >PHP</a> </li> <li class="cat-item cat-item-56"><a href="http://www.sealyu.com/category/python/?lang=zh-hans" >Python</a> </li> <li class="cat-item cat-item-57"><a href="http://www.sealyu.com/category/seam/?lang=zh-hans" >Seam</a> </li> <li class="cat-item cat-item-66"><a href="http://www.sealyu.com/category/seo/?lang=zh-hans" >SEO</a> </li> <li class="cat-item cat-item-58"><a href="http://www.sealyu.com/category/spring/?lang=zh-hans" >Spring</a> </li> <li class="cat-item cat-item-55"><a href="http://www.sealyu.com/category/struts/?lang=zh-hans" >Struts</a> </li> <li class="cat-item cat-item-37"><a href="http://www.sealyu.com/category/web/?lang=zh-hans" >Web</a> </li> <li class="cat-item cat-item-108"><a href="http://www.sealyu.com/category/web3/?lang=zh-hans" >Web3</a> </li> <li class="cat-item cat-item-44"><a href="http://www.sealyu.com/category/web%e6%9c%8d%e5%8a%a1%e5%99%a8/?lang=zh-hans" >web服务器</a> </li> <li class="cat-item cat-item-46"><a href="http://www.sealyu.com/category/%e4%b8%ad%e5%8c%bb/?lang=zh-hans" >中医</a> </li> <li class="cat-item cat-item-52"><a href="http://www.sealyu.com/category/%e5%a8%b1%e4%b9%90/?lang=zh-hans" >娱乐</a> </li> <li class="cat-item cat-item-36"><a href="http://www.sealyu.com/category/%e6%95%b0%e6%8d%ae%e5%ba%93/?lang=zh-hans" >数据库</a> </li> <li class="cat-item cat-item-1"><a href="http://www.sealyu.com/category/%e6%9c%aa%e5%88%86%e7%b1%bb/?lang=zh-hans" >未分类</a> </li> <li class="cat-item cat-item-64"><a href="http://www.sealyu.com/category/%e6%b5%8b%e8%af%95/?lang=zh-hans" >测试</a> </li> <li class="cat-item cat-item-54"><a href="http://www.sealyu.com/category/%e7%89%88%e6%9c%ac%e6%8e%a7%e5%88%b6/?lang=zh-hans" >版本控制</a> </li> <li class="cat-item cat-item-62"><a href="http://www.sealyu.com/category/%e7%94%9f%e6%b4%bb/?lang=zh-hans" >生活</a> </li> <li class="cat-item cat-item-50"><a href="http://www.sealyu.com/category/%e7%b3%bb%e7%bb%9f%e6%9e%b6%e6%9e%84/?lang=zh-hans" >系统架构</a> </li> <li class="cat-item cat-item-45"><a href="http://www.sealyu.com/category/%e7%bb%bc%e5%90%88/?lang=zh-hans" >综合</a> </li> <li class="cat-item cat-item-48"><a href="http://www.sealyu.com/category/%e8%8b%b1%e8%af%ad/?lang=zh-hans" >英语</a> </li> <li class="cat-item cat-item-51"><a href="http://www.sealyu.com/category/%e8%ae%be%e8%ae%a1%e6%a8%a1%e5%bc%8f/?lang=zh-hans" >设计模式</a> </li> <li class="cat-item cat-item-47"><a href="http://www.sealyu.com/category/%e8%af%bb%e4%b9%a6/?lang=zh-hans" >读书</a> </li> <li class="cat-item cat-item-73"><a href="http://www.sealyu.com/category/%e8%b4%b9%e5%9f%8e%e7%94%9f%e6%b4%bb/?lang=zh-hans" >费城生活</a> </li> <li class="cat-item cat-item-40"><a href="http://www.sealyu.com/category/%e9%a1%b9%e7%9b%ae%e7%ae%a1%e7%90%86/?lang=zh-hans" >项目管理</a> </li> </ul> </div> </section><!-- / end section .sidebar --> </section> </section> </div><!-- / end div .content_area --> <div class="content_footer footer_widgets_holder"><section class="footer_widgets clearfix"></section></div> </div><!-- / end div .content_second_background --> </div><!-- / end div .content_holder --> </div><!-- end div #container --> <!-- footer --> <footer id="footer"> <!-- footer info --> <div class="footer_info"> <!-- left side --> <div class="part1"> <!-- footer nav --> <ul id="footer_links" class="footer_links"><li id="menu-item-658" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-658"><a href="http://www.sealyu.com/?lang=zh-hans">首页</a></li> <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a href="http://www.sealyu.com/my-products/?lang=zh-hans">Apps & Sites</a></li> <li id="menu-item-645" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-645"><a href="http://www.sealyu.com/blog/?lang=zh-hans">博客</a></li> <li id="menu-item-449" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-449"><a href="http://www.sealyu.com/contact-me/?lang=zh-hans">联系我</a></li> </ul> <!-- / end ul .footer_links --> <!-- copyright text --> <div class="copyright">Copyright © 2014 Haibo Yu, Inc. </div><!-- / end div .copyright --> </div><!-- / end div .part1 --> <!-- social media icons --> <!-- / end ul .social_media_icons --> </div><!-- / end div .footer_info --> </footer> <!-- / footer --> <script type='text/javascript'> /* <![CDATA[ */ r3f5x9JS=escape(document['referrer']); hf4N='376bace7012b223a0fe7ae965e3f6862'; hf4V='d18e85781d04c85cc47444ed0459ab6a'; cm4S="form[action='http://www.sealyu.com/wp-comments-post.php']"; jQuery(document).ready(function($){var e="#commentform, .comment-respond form, .comment-form, "+cm4S+", #lostpasswordform, #registerform, #loginform, #login_form, #wpss_contact_form";$(e).submit(function(){$("<input>").attr("type","hidden").attr("name","r3f5x9JS").attr("value",r3f5x9JS).appendTo(e);$("<input>").attr("type","hidden").attr("name",hf4N).attr("value",hf4V).appendTo(e);return true;});$("#comment").attr({minlength:"15",maxlength:"15360"})}); /* ]]> */ </script> <div style="display:none"> </div> <!--[if lte IE 8]> <link rel='stylesheet' id='jetpack-carousel-ie8fix-css' href='http://www.sealyu.com/wp-content/plugins/jetpack/modules/carousel/jetpack-carousel-ie8fix.css?ver=20121024' type='text/css' media='all' /> <![endif]--> <link rel='stylesheet' id='buttons-css' href='http://www.sealyu.com/wp-includes/css/buttons.min.css?ver=dfa7740aff2ac799607ea5462fd72198' type='text/css' media='all' /> <script type='text/javascript' src='http://www.sealyu.com/wp-content/plugins/jetpack/modules/photon/photon.js?ver=20130122'></script> <script type='text/javascript' src='https://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201725'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/themes/rttheme18/js/jquery.easing.1.3.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/themes/rttheme18/js/jquery.tools.min.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/themes/rttheme18/js/waypoints.min.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/themes/rttheme18/js/video_player/mediaelement-and-player.min.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/themes/rttheme18/js/lightbox/js/jackbox-packed.min.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/themes/rttheme18/js/colortip-1.0-jquery.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/themes/rttheme18/js/jquery.flexslider.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript'> /* <![CDATA[ */ var rt_theme_params = {"ajax_url":"http:\/\/www.sealyu.com\/wp-admin\/admin-ajax.php?lang=zh-hans","rttheme_template_dir":"http:\/\/www.sealyu.com\/wp-content\/themes\/rttheme18","sticky_logo":"on","content_animations":"on","page_loading":""}; /* ]]> */ </script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/themes/rttheme18/js/script.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-includes/js/comment-reply.min.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/plugins/open-social/images/os.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/plugins/wp-spamshield/js/jscripts-ftr-min.js'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-includes/js/wp-embed.min.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript'> /* <![CDATA[ */ var icl_vars = {"current_language":"zh-hans","icl_home":"http:\/\/www.sealyu.com?lang=zh-hans"}; /* ]]> */ </script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/plugins/sitepress-multilingual-cms/res/js/sitepress.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/plugins/jetpack/_inc/spin.js?ver=1.3'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/plugins/jetpack/_inc/jquery.spin.js?ver=1.3'></script> <script type='text/javascript'> /* <![CDATA[ */ var jetpackCarouselStrings = {"widths":[370,700,1000,1200,1400,2000],"is_logged_in":"","lang":"zh","ajaxurl":"http:\/\/www.sealyu.com\/wp-admin\/admin-ajax.php","nonce":"22fb217641","display_exif":"1","display_geo":"1","single_image_gallery":"1","single_image_gallery_media_file":"","background_color":"black","comment":"\u6761\u8bc4\u8bba","post_comment":"\u53d1\u8868\u8bc4\u8bba","write_comment":"\u64b0\u5199\u8bc4\u8bba...","loading_comments":"\u6b63\u5728\u52a0\u8f7d\u8bc4\u8bba...","download_original":"\u67e5\u770b\u5168\u5c3a\u5bf8 <span class=\"photo-size\">{0}<span class=\"photo-size-times\">\u00d7<\/span>{1}<\/span>","no_comment_text":"\u8bf7\u786e\u4fdd\u4e0e\u60a8\u7684\u8bc4\u8bba\u4e00\u8d77\u63d0\u4ea4\u90e8\u5206\u6587\u672c\u3002","no_comment_email":"\u8bf7\u63d0\u4f9b\u7528\u4e8e\u53d1\u8868\u8bc4\u8bba\u7684\u7535\u5b50\u90ae\u4ef6\u5730\u5740\u3002","no_comment_author":"\u8bf7\u63d0\u4f9b\u60a8\u7528\u4e8e\u53d1\u8868\u8bc4\u8bba\u7684\u59d3\u540d\u3002","comment_post_error":"\u62b1\u6b49\uff0c\u53d1\u8868\u60a8\u7684\u8bc4\u8bba\u65f6\u51fa\u9519\u3002\u8bf7\u7a0d\u540e\u91cd\u8bd5\u3002","comment_approved":"\u60a8\u7684\u8bc4\u8bba\u5df2\u83b7\u5f97\u6279\u51c6\u3002","comment_unapproved":"\u6b63\u5728\u5ba1\u6838\u60a8\u7684\u8bc4\u8bba\u3002","camera":"\u7167\u76f8\u673a","aperture":"\u5149\u5708","shutter_speed":"\u5feb\u95e8\u901f\u5ea6","focal_length":"\u7126\u8ddd","copyright":"Copyright","comment_registration":"0","require_name_email":"1","login_url":"http:\/\/www.sealyu.com\/wp-login.php?redirect_to=http%3A%2F%2Fwww.sealyu.com%2F2009%2F12%2F21%2F%25e5%2587%25a0%25e4%25b8%25aajquery%25e9%25aa%258c%25e8%25af%2581%25e5%25af%2586%25e7%25a0%2581%25e5%25bc%25ba%25e5%25ba%25a6%25e7%259a%2584%25e6%258f%2592%25e4%25bb%25b6%2F%3Flang%3Dzh-hans","blog_id":"1","meta_data":["camera","aperture","shutter_speed","focal_length","copyright"],"local_comments_commenting_as":"<fieldset><label for=\"email\">\u7535\u5b50\u90ae\u7bb1\uff08\u5fc5\u586b\uff09<\/label> <input type=\"text\" name=\"email\" class=\"jp-carousel-comment-form-field jp-carousel-comment-form-text-field\" id=\"jp-carousel-comment-form-email-field\" \/><\/fieldset><fieldset><label for=\"author\">\u540d\u79f0\uff08\u5fc5\u586b\uff09<\/label> <input type=\"text\" name=\"author\" class=\"jp-carousel-comment-form-field jp-carousel-comment-form-text-field\" id=\"jp-carousel-comment-form-author-field\" \/><\/fieldset><fieldset><label for=\"url\">\u7f51\u5740<\/label> <input type=\"text\" name=\"url\" class=\"jp-carousel-comment-form-field jp-carousel-comment-form-text-field\" id=\"jp-carousel-comment-form-url-field\" \/><\/fieldset>"}; /* ]]> */ </script> <script type='text/javascript' src='http://www.sealyu.com/wp-content/plugins/jetpack/modules/carousel/jetpack-carousel.js?ver=20170209'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-includes/js/wp-a11y.min.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript'> /* <![CDATA[ */ var wpLinkL10n = {"title":"\u63d2\u5165\u6216\u7f16\u8f91\u94fe\u63a5","update":"\u66f4\u65b0","save":"\u6dfb\u52a0\u94fe\u63a5","noTitle":"(\u65e0\u6807\u9898)","noMatchesFound":"\u672a\u627e\u5230\u7ed3\u679c\u3002","linkSelected":"\u94fe\u63a5\u5df2\u9009\u62e9\u3002","linkInserted":"\u94fe\u63a5\u5df2\u63d2\u5165\u3002"}; /* ]]> */ </script> <script type='text/javascript' src='http://www.sealyu.com/wp-includes/js/wplink.min.js?ver=dfa7740aff2ac799607ea5462fd72198'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-includes/js/jquery/ui/widget.min.js?ver=1.11.4'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-includes/js/jquery/ui/position.min.js?ver=1.11.4'></script> <script type='text/javascript' src='http://www.sealyu.com/wp-includes/js/jquery/ui/menu.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var uiAutocompleteL10n = {"noResults":"\u672a\u627e\u5230\u7ed3\u679c\u3002","oneResult":"\u627e\u52301\u4e2a\u7ed3\u679c\u3002\u4f7f\u7528\u4e0a\u4e0b\u65b9\u5411\u952e\u6765\u5bfc\u822a\u3002","manyResults":"\u627e\u5230%d\u4e2a\u7ed3\u679c\u3002\u4f7f\u7528\u4e0a\u4e0b\u65b9\u5411\u952e\u6765\u5bfc\u822a\u3002","itemSelected":"\u5df2\u9009\u62e9\u9879\u76ee\u3002"}; /* ]]> */ </script> <script type='text/javascript' src='http://www.sealyu.com/wp-includes/js/jquery/ui/autocomplete.min.js?ver=1.11.4'></script> <script type="text/javascript"> tinyMCEPreInit = { baseURL: "http://www.sealyu.com/wp-includes/js/tinymce", suffix: ".min", mceInit: {}, qtInit: {'comment':{id:"comment",buttons:"strong,em,link,block,del,ins,img,ul,ol,li,code,more,close"}}, ref: {plugins:"",theme:"modern",language:""}, load_ext: function(url,lang){var sl=tinymce.ScriptLoader;sl.markDone(url+'/langs/'+lang+'.js');sl.markDone(url+'/langs/'+lang+'_dlg.js');} }; </script> <script type="text/javascript"> var ajaxurl = "/wp-admin/admin-ajax.php"; ( function() { var init, id, $wrap; if ( typeof tinymce !== 'undefined' ) { if ( tinymce.Env.ie && tinymce.Env.ie < 11 ) { tinymce.$( '.wp-editor-wrap ' ).removeClass( 'tmce-active' ).addClass( 'html-active' ); return; } for ( id in tinyMCEPreInit.mceInit ) { init = tinyMCEPreInit.mceInit[id]; $wrap = tinymce.$( '#wp-' + id + '-wrap' ); if ( ( $wrap.hasClass( 'tmce-active' ) || ! tinyMCEPreInit.qtInit.hasOwnProperty( id ) ) && ! init.wp_skip_init ) { tinymce.init( init ); if ( ! window.wpActiveEditor ) { window.wpActiveEditor = id; } } } } if ( typeof quicktags !== 'undefined' ) { for ( id in tinyMCEPreInit.qtInit ) { quicktags( tinyMCEPreInit.qtInit[id] ); if ( ! window.wpActiveEditor ) { window.wpActiveEditor = id; } } } }()); </script> <div id="wp-link-backdrop" style="display: none"></div> <div id="wp-link-wrap" class="wp-core-ui" style="display: none" role="dialog" aria-labelledby="link-modal-title"> <form id="wp-link" tabindex="-1"> <input type="hidden" id="_ajax_linking_nonce" name="_ajax_linking_nonce" value="e1f603f31a" /> <h1 id="link-modal-title">插入或编辑链接</h1> <button type="button" id="wp-link-close"><span class="screen-reader-text">关闭</span></button> <div id="link-selector"> <div id="link-options"> <p class="howto" id="wplink-enter-url">输入目标URL</p> <div> <label><span>URL</span> <input id="wp-link-url" type="text" aria-describedby="wplink-enter-url" /></label> </div> <div class="wp-link-text-field"> <label><span>链接文本</span> <input id="wp-link-text" type="text" /></label> </div> <div class="link-target"> <label><span></span> <input type="checkbox" id="wp-link-target" /> 在新标签页中打开链接</label> </div> </div> <p class="howto" id="wplink-link-existing-content">或链接到站点中的内容</p> <div id="search-panel"> <div class="link-search-wrapper"> <label> <span class="search-label">搜索</span> <input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" aria-describedby="wplink-link-existing-content" /> <span class="spinner"></span> </label> </div> <div id="search-results" class="query-results" tabindex="0"> <ul></ul> <div class="river-waiting"> <span class="spinner"></span> </div> </div> <div id="most-recent-results" class="query-results" tabindex="0"> <div class="query-notice" id="query-notice-message"> <em class="query-notice-default">未指定搜索条件。自动显示近期条目。</em> <em class="query-notice-hint screen-reader-text">搜索或使用上下方向键来选择一项。</em> </div> <ul></ul> <div class="river-waiting"> <span class="spinner"></span> </div> </div> </div> </div> <div class="submitbox"> <div id="wp-link-cancel"> <button type="button" class="button">取消</button> </div> <div id="wp-link-update"> <input type="submit" value="添加链接" class="button button-primary" id="wp-link-submit" name="wp-link-submit"> </div> </div> </form> </div> <script type='text/javascript' src='https://stats.wp.com/e-201725.js' async defer></script> <script type='text/javascript'> _stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:5.0',blog:'103644843',post:'695',tz:'0',srv:'www.sealyu.com'} ]); _stq.push([ 'clickTrackerInit', '103644843', '695' ]); </script> </body> </html>