date1101密码可视化--- highlight: an-old-hope --- ```html 输入框：眼睛图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    输入框：<input type="password" class="ipt"><br>
    <button class="btn">眼睛图标</button>

    <script>
        /*
            监听 button 的点击事件
                标签对象.onclick = function(){}

                点击的时候 判断 input 框的 type
                    如果type === password    ------->  那就赋值text
                    如果type === text        ------->  那就赋值password

        */
        var oIpt = document.querySelector('.ipt');
        var oBtn = document.querySelector('.btn');

        oBtn.onclick = function () {

            // 如果type === password    ------->  那就赋值text
            if (oIpt.getAttribute('type') === 'password') {
                oIpt.setAttribute('type', 'text');
                console.log(111);
            
            // 如果type === text        ------->  那就赋值password
            } else if (oIpt.getAttribute('type') === 'text') {
                oIpt.setAttribute('type', 'password');
                
            }
        }
    </script>
</body>

</html>