当前位置:96看吧 > 实用代码 > 网页特效 > 检测用户输入密码强度jquery特效代码

检测用户输入密码强度jquery特效代码

时间:2013/07/12
作者:诚心
来源:本站整理
查看:

检测用户输入密码强度jquery特效代码效果图

jquery特效代码是效仿各大门户的登陆注册页时检测输入密码强度jquery特效代码,非常实用。96看吧推荐使用。

style代码部分:

  1. <style>  
  2. .len_box { width:205pxheight:12pxmargin-top:10pxborder:solid #ccc 1px; }  
  3. .len_color { width:1%background:#F00height:12px; }  
  4. .text { width:200pxheight:22px; }  
  5. </style> 

 

该js特效代码的jquery核心部分,记得使用特效是先引入jQuery组建类库:

  1. <script src="http://www.96kb.com/templet/script/jquery.js"></script>  
  2. <script>  
  3. $(function(){  
  4.     $(".text").keyup(function(){  
  5.         var Max = 20;//input_maxlength  
  6.         $(".text").attr("maxlength",Max);  
  7.         var len = $(".text").val().length;  
  8.         var Width = (len/Max)*parseInt($(".len_box").css("width"));  
  9.         $(".len_color").css({"width":Width})  
  10.         if(Width<20){  
  11.             $(".len_color").css({"background":"#F00"})  
  12.         }else if(20<=Width && Width<50){  
  13.             $(".len_color").css({"background":"#F90"})  
  14.         }else if(Width>=50){  
  15.             $(".len_color").css({"background":"#6F3"})  
  16.         }  
  17.     })  
  18.       
  19. })  
  20. </script> 
上一篇:图片可上下滚轮的jQuery特效
下一篇:让div左右对齐自适应高度的网页特效
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
相关最新
相关热门