仿京东显示隐藏密码

刺骨的言语ヽ痛彻心扉 2023-02-17 06:16 10阅读 0赞

![在这里插入图片描述][2020061221083895.gif]

##### 素材 #####

![在这里插入图片描述][20200612210927899.png]  
![在这里插入图片描述][20200612210956277.png]

<!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> .box { 
                position: relative;
                width: 400px;
                border-bottom: 1px solid #ccc;
                margin: 100px auto;
            }
            
            .box input { 
                width: 370px;
                height: 30px;
                border: 0;
                outline: none;
            }
            
            .box img { 
                position: absolute;
                top: 2px;
                right: 2px;
                width: 24px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <label for="">
                <img src="images/close.png" alt="" id="eye">
            </label>
            <input type="password" name="" id="pwd">
        </div>
        <script>
            // 1. 获取元素
            var eye = document.getElementById('eye');
            var pwd = document.getElementById('pwd');
            // 2. 注册事件 处理程序
            var flag = 0; eye.onclick = function() { 
                // 点击一次之后， flag 一定要变化 if (flag == 0) { 
                    pwd.type = 'text';
                    eye.src = 'images/open.png';
                    flag = 1; // 赋值操作
                } else { 
                    pwd.type = 'password';
                    eye.src = 'images/close.png';
                    flag = 0;
                }
    
            }
        </script>
    </body>
    
    </html>

[2020061221083895.gif]: https://img-blog.csdnimg.cn/2020061221083895.gif
[20200612210927899.png]: https://img-blog.csdnimg.cn/20200612210927899.png
[20200612210956277.png]: https://img-blog.csdnimg.cn/20200612210956277.png