效果如下图：

低：

aaarticlea/png;base64,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" alt="" width="260" height="75" />

中：

aaarticlea/png;base64,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" alt="" width="261" height="82" />

高：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWsAAABgCAIAAABUlMRYAAAHWElEQVR4nO3cT27a2APA8dxoFhyEjbdziejdoZq1D9ArjA/wWyAlBhuTxo3toAapihpCVdTQLhAtGPu3eNg8gwPOI50a+v0oyrTgeKwZvW/fn6RnKQDoOvvdDwDgiL2gIJZoNIS18aJvGo01IUSjwDD9V31cALWysyDWRg825X3wTWOrLWmaWqLsVQAnY09BlDmEJbIZiG8ahunLz6sXhNKS/GsICHDq9q1iLNEQVjbFsIQQYntpooZGmY0U+gPgFO0siG8aDWFlWbBEQ26E+L6fv6XuhBimr2RDaYlvGuyIAKeoyk7qajskX5KsKrHuimH62atbWyeG6VMQ4FTtnYM0GnIZ88wJiyWEEEpBtm7AVghwwnYVxDJNX+mCukmq9sJaF8QUxdCYYvv8F8Dp2L+T+pKCbM5BVuc3rGKAE1XhLGbfN4Pkl2xFQtmJpSDAKdL9rvbdc5DnowLglPBzMQD0URAA+igIAH0UBIA+CgJAHwUBoI+CANBHQQDooyAA9O0qyP8AnK7/oiCv8u8AUDcUBIA+CgJAHwUBoI+CANBHQQDooyAA9FEQAPooCAB9FASAPgoCQB8FAaCPggCnb7lcxnG8XC6TJInjOEmS6XQ6GAzev3/ved719fXd3d23b9/klUmSyM9V7kxBgNOXR2GxWCRJMhqN3r171263Ly8vXde1bdu2bc/zHh4e8iuXy2WVO1MQ4PQtM0mSfPnypdPp2LZ9fX398PAwHo+Hw2EQBLZtO44zHA7lPIWCAFiRq5gkSX78+HFzc2PbdhRF0+k0v2A2m3348OHi4sL3fZkPCgJgJV+/fP361XGcbrf79PSUpmkcx3EcLxaLNE1//vw5HA6fnp5kPuI4rnJnCgKcvrwInz9/tm3b9/3FYqEubdSt0/z1KneuXUH+/ftM+uufQHk5+Oev1et///uHXg5ok4FIkuT+/r7dbodhKAuSL1jkryU5YTnKgqwHT3EE5WOtOOD+oMuBA41GI9/3e71et9uVJ7jvylxn7u7uqty2VgXZGFX5uCqOqnxc/UGXAwdJkuT29vby8tJxHM/z3DKO47iu28m4rlvlzhTkKC4HDpIkSRiGrut6nud5npyGdLtdx3FkOFzX7fV68oJer+d5nuM4Ve5cq4LUa+FQq8uBA0VRJGcWeT7kme5gMOj3+7IjXYXneVVuW6+CpDXbvKzV5cAhwjCU57jdblfuhgwGg/l8nqZpHMf39/dyGqJGpMpta1cQAL9CXhBZik6nM5lM0jSdz+fyx2TkKiafiRzrHATArxBFkSyI3OlwHOf79+9pdtA7m81kXOQChzkIgIIgCDqdTn4Q4zjO7e3tbDZbLpfz+fzjx4+yL47jyLXMMZ7FAPhVoiiSh7X5iUyn0/F9P4qiIAhkPuTcRO6qsooBsJIkSRAE+WFtPtdwXbfdbudHuXlc5G+r3JmCAH+EMAwvLi46nU673W63247jyF90u135ouM48qf+HcexbZuCAFiRfy1IGIY3NzdhGIZhGARBEARyCRNFkXxF/fzp06cqd6YgwOmr+FcWaqAgAPRREAD6KAgAfRQEgD4KAkAfBQGgj4IA0EdBAOijIAD0/UcFAXCqfnlBAGA3CgJAHwUBoI+CANBHQQDooyAA9FEQYKXhnb3KxxHd8HAUBFip/4CnIEB91X/AUxDgUJZoZISV+qbRKDJMv/yLhLXnztsj7XzyqLz/2Bq86Re+4urtYQP+fPLYHx1SkGZrnr03t869jcfb/4SHoyA4Ur5pyIKoZfBNY1WQ7bTs7czuYfx2+tgaqK+86f/+gigPIwsyt85f8oSHoyA4UnlBytuQt6TQGEuUTlGkkpE5sMbr9x9bA+XP/DTVmoNsTxMOvGGxIC+84eEoCI7NehmjzEEs0RDWxhzEMJ6fhpQtaUpG5uhqPGkqc5Bma56PSb05SGGaUJyDqDevesP1OkuZg5xPHseTJnMQoMxqHlFcv6wKslZhDrK5OVJakOIqY2OZoLHoeP2C9Eclt83Dt/sJD0dBcGQ2ivDc/CK/bGOd86KCFHdS0/5EXdSkaZqW7mLsuOGrF0Tdndl4Wqk0JZr/6ctQEByZwllMPqfI5yBZOTa2WKsoGfCD5vl6rKb9UfN8oI5erYLseoSXFqRwFvM269F6DqKswigIoLKEYfrPz0Es0RBW6dvl573prgF/9Xa9D7K6eDxpbp3O/IY5SFY6azx9wxwEqK54rJLNQbJ/rqcg6g5Jcd1SYR/EO2uMrtI0TedX/flja7D6bX8kB7xGQQofr3aaO7DG0zfqbceTZpUnPBwFwXHaWKWosw1hpZbY3PAoOYHZW5Bma56mq5HZbM0fWyN1oNapIMXVijoZYQ4CFGU9EJaySVo4lhFCGKa/fjeLiXJ95e8oW4/GrB3br/zGgmQPU/h+WaUazda05PDotf5XpBQEyO0dyRU/juiGh6MgwEr9BzwFAeqr/gOeggA4KRQEgD4KAkAfBQGgj4IA0EdBAOijIAD0URAA+v4PrVz27eXO7BAAAAAASUVORK5CYII=" alt="" width="265" height="70" />

页面上需要绑定的id如下：

 <div class="passwordtishi f12">

                    <font class="c666">安全程度：</font>

                    <span id="strength_L">弱</span><span id="strength_M">中</span><span id="strength_H">强</span>

                </div>

引用的js如下：

//密码强度弱中强变色js

//CharMode函数

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

function CharMode(iN) {

    if (iN >=  && iN <= ) //数字

        return ;

    if (iN >=  && iN <= ) //大写字母

        return ;

    if (iN >=  && iN <= ) //小写

        return ;

    else

        return ; //特殊字符

}

//bitTotal函数

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

function bitTotal(num) {

    modes = ;

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

        if (num & ) modes++;

        num >>>= ;

    }

    return modes;

}

//checkStrong函数

//返回密码的强度级别

function checkStrong(sPW) {

    if (sPW.length <= )

        return ; //密码太短

    Modes = ;

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

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

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

    }

    return bitTotal(Modes);

}

//pwStrength函数

//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色

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 :

                Lcolor = Mcolor = Hcolor = O_color;

            case :

                Lcolor = L_color;

                Mcolor = Hcolor = O_color;

                break;

            case :

                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;

}