密码强度检查小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    input{
        width: 200px;
        height: 24px;
        padding-left: 5px;
    }
    div{
        width: 200px;
        display: flex;

    }
    span{
        width: 100%;
        height: 14px;

        margin: 5px 1px;
       border: 1px solid #ccc; 
       text-align: center;
       font-size: 12px;
       line-break: 14px;
       transition: .3s;
       /* background: o */
    }
    </style>
</head>
<body>
    <h3>密码强度</h3>
    <input type="password" name="" placeholder="请输入你的密码" id="password">
    <div class="notice">
        <span>弱</span>
        <span>一般</span>
        <span>强</span>
    </div>
    <script>
    
    let text =document.getElementById(‘password‘);
    let span = document.getElementsByTagName(‘span‘);

    
    text.onkeyup =function(){
        if(text.value.length !==0 ){
            if(text.value.length <= 4){
                for (let i=0;i<span.length;i++){
                    if(i===1||i===2){
                    span[i].style.backgroundColor = ‘white‘;
                    span[i].style.color = ‘black‘;
                    }
                   else{
                    span[i].style.backgroundColor = ‘red‘;
                    span[i].style.color = ‘white‘;
                   }
                }
                
            }else if(text.value.length <= 8){
                for (let i=0;i<span.length;i++){
                    if(i===0||i===1){
                    span[i].style.backgroundColor = ‘orange‘;
                    span[i].style.color = ‘white‘;
                    }
                   else{
                    span[i].style.backgroundColor = ‘white‘;
                    span[i].style.color = ‘black‘;
                   }
                }
            }else{
                for (let i=0;i<span.length;i++){
                    span[i].style.backgroundColor = ‘rgb(45,173,45)‘;
                    span[i].style.color = ‘white‘;
                }
            }
        }else{
            for (let i=0;i<span.length;i++){
                    span[i].style.backgroundColor = ‘white‘;
                    span[i].style.color = ‘black‘;
            }
        }
 

    }
 
   
  
    
    </script>
</body>
</html>
密码强度检查小练习

相关推荐
