密码强度验证

简单日常的Portion

html 部分

<form action="#">
      <section>
        <p>账号：<input type="text" name="userName" /></p>
        <p>
          密码：<input type="password" name="pwd" /><span
            ><img src="./img/b.png" alt=""
          /></span>
        </p>
        <p>
          <i>弱</i>
          <i>中</i>
          <i>强</i>
        </p>
        <input type="submit" value="提交">
       </section>
    </form>

css部分：

section{
    padding-top: 1px;
    width: 800px;
    height: 300px;
    background-color: rebeccapurple;
    margin: 20px auto;
    font-size: 24px;
    color: #fff;
    p{
        width: 275px;
        margin: auto;
        input{
            font-size: 24px;
            height: 24px;
            width: 170px;
            margin-bottom: 15px;
            outline-style: none;
        }
    }
   
}
img{
    width: 20px;
    height: 20px;
    margin-left: 5px;
    vertical-align: middle;
}

js部分：

let sec = document.getElementsByTagName("section")[0]

let inp = document.getElementsByTagName("input");

let img = document.getElementsByTagName("img")[0];

let i = document.getElementsByTagName("i");

sec.addEventListener("click", login)

sec.addEventListener("input", pwd)

function pwd(e) {
    let event = e || window.e;
    if (event.target.type == "password") {
        console.log(inp[1].value.length);
        if (inp[1].value.length == 0) {
            intensity("", "", "");
        } else if (inp[1].value.length <= 3) {  // 三位数以下
            intensity("red", "", "")
        } else if (inp[1].value.length <= 6) {  // 六位数以下
            intensity("", "blue", "")
        } else {        // 六位数以上
            intensity("", "", "green")
        }
    }
    // 防抖节流
    if (event.target.type == "text") {
        temp();
    }

}
function fang() {
    let timer = "";
    return function () {
        if (timer) {
            clearInterval(timer);
        }
        timer = setTimeout(fn, 1000);
    }
}

let temp = fang()

function fn() {
    console.log(inp[0].value)
}

// 密码框 type 类型更改
function login(e) {
    let event = e || window.e;
    if (event.target.localName == "img") {
        img.src = inp[1].type == "password" ? img.src = "./img/z.png" : img.src = "./img/b.png"
        inp[1].type = inp[1].type == "password" ? "text" : "password"
    }
}
// 密码 强度 
function intensity(c1, c2, c3) {
    i[0].style.color = c1
    i[1].style.color = c2
    i[2].style.color = c3
}