<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { border: 0; outline: none; width: 370px; height: 30px; } .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" id="pwd"> </div>
<script> // 1 获取元素 var eye = document.getElementById('eye'); var pwd = document.getElementById('pwd'); // 切换显示隐藏 var flag = 0; // 2 注册事件 绑定程序 eye.onclick = function() { 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>