js案例（密码的显示与隐藏）

一、代码思路

        利用onclick（事件绑定）当点击按钮时，密码框的type属性变成password属性。s

二、代码演示

css部分

    <style>
        #wai{
            height: 30px;
            width: 400px;
            border-bottom: 1px solid gray;
            margin: 200px auto;
            display: flex;
        }
        #shuru{
            width:370px;
            height:27px;
            border: 0;
            outline: none;
            
        }
        #w{
            font-size: 3px;
            text-align: center;
        }
    </style>

 html和js部分

    <div id="wai">
        <input type="password" value="" id="shuru">
        <input type="button" value="显示密码" id="xs">
        <div id="w">忘记密码</div>
    </div>
    <script>
        let xs=document.querySelector('#xs')
        let shuru=document.querySelector('#shuru')
        let w=document.querySelector("#w")
        let flag=0
        xs.onclick=function(){
            if(flag == 0){
                shuru.type='text'
                flag=1
            }
            else{
                shuru.type='password'
                flag=0
            }
        }
    </script>