模仿美团的美化

<!DOCTYPE>

<head runat="server">

<title></title>

<link rel="stylesheet" type="text/css" href="mima.css">

<script src="jquery-1.9.0.min.js"></script>

<script src="MeForCopy.js"></script>

</head>

<body>

<form name="form1" action="">

    <input type="password" size="10" id="password">

    <br>

    <div class="pw-strength">

        <div id="J-pw-strength__bar" class="pw-strength__bar"></div>

        <div class="pw-strength__letter">

            <span class="pw-strength__label">L</span>

            <span class="pw-strength__label">M</span>

            <span class="pw-strength__label pw-strength__label--noborder">H</span>

        </div>

    </div>

    <div id="msg"></div>

</form>

</body>

</html>

JS

  $(function() {

    $("#password").blur(function(event) {

      /* Act on the event */

      var psw = $(this).val(); //okay

      pwStrength(psw);

    });

    $("#password").keyup(function(event) {

      /* Act on the event */

      var psw = $(this).val(); //okay

      pwStrength(psw);

    });

  });

  function pwStrength(psw) {

    if (psw == '') {

      $("#msg").text('no');

      $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar');

    } else {

      S_level = checkStrong(psw);

      switch (S_level) {

        case 0:

          $("#msg").text('no');

          $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar');

        case 1:

          $("#msg").text('weak');

          $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar').addClass('pw-strength__bar--weak');

          break;

        case 2:

          $("#msg").text('normal');

          $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar').addClass('pw-strength__bar--normal');

          break;

        default:

          $("#msg").text('Strong');

          $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar').addClass('pw-strength__bar--strong');

      }

    }

  }

  function checkStrong(sPW) {

    if (sPW.length <= 4) {

      return 0; //密码太短

    }

    Modes = 0;

    for (i = 0; i < sPW.length; i++) {

      //测试每一个字符的类别并统计一共有多少种模式.

      Modes |= CharMode(sPW.charCodeAt(i));

    }

    return bitTotal(Modes);

  }

  //CharMode函数

  //测试某个字符是属于哪一类.

  function CharMode(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; //特殊字符

  }

  //bitTotal函数

  //计算出当前密码当中一共有多少种模式

  function bitTotal(num) {

    modes = 0;

    for (i = 0; i < 4; i++) {

      if (num & 1) modes++;

      num >>>= 1;

    }

    return modes;

  }

CSS

.pw-strength {

    background: none repeat scroll 0 0 #C9E0DD;

    left: 80px;

    position: absolute;

    top: 45px;

    width: 234px;

}

.pw-strength__bar {

    background: none repeat scroll 0 0 #C9E0DD;

    height: 16px;

    overflow: hidden;

    width:;

    -moz-transition: all 0.4s linear 0s;

    transition: all .4s linear;

    -webkit-transition: all .4s linear;

    -moz-transition: all .4s linear;

    -o-transition: all .4s linear;

}

.pw-strength__letter {

    left:;

    position: absolute;

    top:;

}

.pw-strength__bar--normal {

    background: none repeat scroll 0 0 #F1D93A;

    width: 154px;

}

.pw-strength__bar--weak {

    background: none repeat scroll 0 0 #EA9292;

    width: 76px;

}

.pw-strength__bar--strong {

    background: none repeat scroll 0 0 #5AAC47;

    width: 232px;

}

.pw-strength__label {

    border-right: 2px solid #FFFFFF;

    color: #FFFFFF;

    display: block;

    float: left;

    font-size: 12px;

    height: 16px;

    line-height: 16px;

    text-align: center;

    width: 76px;

}

javascript 检测密码强度 美化版的更多相关文章

  1. javascript 检测密码强度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS正则检测密码强度

    今天遇到个需求,使用JS检测密码强度:密码长度最短为8,必须同时包含字母.数字.特殊符号. 代码如下: /*         * 检测密码复杂度         */         function ...

  3. JavaScript判断密码强度

    以下是代码: <html> <head> <title>JS判断密码强度</title> <script language=javascript& ...

  4. JavaScript验证密码强度

    JavaScript的方法: <script type="text/javascript"> window.onload = function () { documen ...

  5. js检测密码强度

    <script> function AuthPasswd(string) {     if(string.length >=6) {         if(/[a-zA-Z]+/.t ...

  6. [No0000CE]检测非空格字符作为密码的密码强度

    Regex.Replace(pwd, "^(?:([a-z])|([A-Z])|([0-9])|(.)){6,}|(.)+$", "$1$2$3$4$5").L ...

  7. js动态判断密码强度&&实用的 jQuery 代码片段

    // 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. js密码强度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 密码强度应用(js)

    <!-- 密码强度div --> <div id="tips" class="help-block"> <b class=&quo ...

随机推荐

  1. HDU 5758 Explorer Bo（树形DP）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5758 [题目大意] 给出一棵树,每条路长度为1,允许从一个节点传送到任意一个节点,现在要求在传送次 ...

  2. 化简复杂逻辑，编写紧凑的if条件语句（二）：依据if子句顺序化简条件

    <化简复杂逻辑,编写紧凑的if条件语句>已经得出了跳.等.飞.异常的各自条件,方便起见这里重新贴一下. 立即跃迁:!a && b && d 等待跃迁:!a ...

  3. 合作开发，导入MyEclipse项目报错问题

    因工作原因,同事将他的java项目交接给了我.和平时的交接一样.他把他最新的源代码,打成压缩包,发给我.我解压后,使用myeclipse开发工具,通过导入,将项目导入到我的开发工具中,这个时候有一个问 ...

  4. VS2015自定义注释内容

    一直想自动添加一些注释信息,找了好多种方式:各种插件什么的,最后偶然发现可以修改vs的模板可以做到,下面介绍如何改 首先找到vs的安装目录,如下是我的安装目录: D:\Program Files\VS ...

  5. 日常之学习CSS3变形和js函数指针

    1,transform变形属性,包括rotate(xxdeg)旋转,translate(x轴px,y轴px)移动,scale(0.5,2)变形(x轴缩小0.5倍,y轴放大2倍),skew(x轴deg, ...

  6. hough变换中，直线方程从XY空间转换到参数空间的转换过程

    XY空间直线方程:y=kx+b 参数空间直线方程:xcosθ+ysinθ＝ρ 直线方程从XY空间转换到参数空间过程的转换过程: k=tan(π-α)=tan(-α)=-tanα=-cotθ=-cosθ ...

  7. des 加密 iOS

    转载请注明原文出处 生成同名的Des.h文件和Des.m文件后,拷贝下方的代码可直接使用.注意在Des.m文件中将key值修改为项目所需的key.--->  #define DesKey 过程很 ...

  8. SQL Server配置管理WMI问题

       今天在打开数据库的时候,连接不上.一看错误就知道肯定是SQL Server的服务没开启,所以自然而然的去SQL Server配置管理中去打开,但是打开配置管理器的时候出现了下面的错误:      ...

  9. lwp 模拟行锁堵塞 前端超时

    jrhmpt01:/root/async# cat a2.pl use LWP::UserAgent; use utf8; use DBI; use POSIX; use HTTP::Date qw( ...

  10. maven 添加自己的包

    mvn install:install-file -Dfile=d:/flea.jar -DgroupId=com.flea.bussiness -DartifactId=flea -Dversion ...