JS--input密码框数字显示与隐藏

前言

这个是js里的一个简单应用，我们只需要搞清楚input标签的属性，详情见下图：

与我们这次有关联的是password（这个是隐藏的）和text（这个是显示）

<form action="#">
        <input type="password" placeholder="请输入您的密码">
        <img src="../img/close-eye.png" alt="">
    </form>

*{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: blanchedalmond;
        }
        form{
            padding: 200px 400px;
        }
        input{
            position: relative;
            outline:none;
            width: 200px;
            height: 30px;
            padding-left: 10px;
            background-color: rgba(100, 148, 237, 0.137);
        }
        img{
            position: absolute;
            width: 30px;
            height: 30px;
            right: 930px;
            top: 202px;
            
        }

function eye(){
            let input=document.querySelector('input');
            let img=document.querySelector('img');
            let flag=0;
            img.addEventListener('click',function(){
                if(flag===0){
                    img.src='../img/open-eye.png';
                    input.type='text';
                    flag=1;
                }else{
                    img.src='../img/close-eye.png';
                    input.type='password';
                    flag=0;
                }
            })
        }
        eye();