從前端小白到大佬 js
阿新 • • 發佈：2021-05-09
密碼顯示與隱藏切換
<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> .box { position: relative; width: 400px; border-bottom: red 1px solid; margin: 100px auto; } .box input { width: 259px; height: 30px; outline: none; border: 0; } .box img { position: absolute; top: 4px; right: 6px; width: 24px; } </style> </head> <body> <div class="box"> <label>密碼：</label> <input type="password"> <img src="../imgs/b.png"> </div> <script> var input = document.querySelector('input'); var img = document.querySelector('img'); var flag = 0 img.onclick = function() { if (flag == 0) { input.type = "text"; img.src = "../imgs/z.png"; flag = 1; } else { input.type = "password"; img.src = "../imgs/b.png"; flag = 0; } } </script> </body>
