JS实现根据密码长度显示安全条功能-创新互联

大家在一些网站上经常可以看到数码密码会根据输入的密码长度显示安全条功能，此功能基于js如何实现的呢？下面看下实现代码，具体代码如下所示：

成都创新互联公司专业为企业提供金寨网站建设、金寨做网站、金寨网站设计、金寨网站制作等企业网站建设、网页设计与制作、金寨企业网站模板建站服务，十多年金寨做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

//根据密码长度显示安全条
          <ul class="clear">
          <li>密　　码：</li>
          <li> <input type="password" id="pwd" name="pwd" class="in" onKeyUp=pwStrength(this.value) onBlur=pw_y("pwd","pwd1")></li>
          <li><em class="red">*</em></li>
          <li class="i2 grey"><table border="0" bordercolor="#cccccc" style='display:marker'>
          <tr align="center">
            <td id="strength_L" bgcolor="#eeeeee">弱</td>
            <td id="strength_M" bgcolor="#eeeeee">中</td>
            <td id="strength_H" bgcolor="#eeeeee">强</td>
          <td align="left" >
           <label id="pwd1">使用数字，字母，下划线，长度在 6 - 20 个字符之间</label></td>
            </tr>
          </table>         
          </li>
          </ul>
function pwStrength(pwd){
  O_color="#eeeeee";
  L_color="#FF0000";
  M_color="#FF9900";
  H_color="#33CC00";
  if (pwd==null||pwd==''){
    Lcolor=Mcolor=Hcolor=O_color;
  }else{
    S_level=checkStrong(pwd);
    switch(S_level) {
      case 0:
        Lcolor=Mcolor=Hcolor=O_color;
      case 1:
        Lcolor=L_color;
        Mcolor=Hcolor=O_color;
        break;
      case 2:
        Lcolor=Mcolor=M_color;
        Hcolor=O_color;
        break;
      default:
        Lcolor=Mcolor=Hcolor=H_color;
      }
  }
  document.getElementById("strength_L").style.background=Lcolor;
  document.getElementById("strength_M").style.background=Mcolor;
  document.getElementById("strength_H").style.background=Hcolor;
  return;
}

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。