案例-------顯示隱藏密碼明文
阿新 • • 發佈：2022-03-15
<!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> /* 清除內外邊距 */ * { margin: 0; padding: 0; } .box { /* 水平居中 */ margin: 100px auto; width: 400px; /* height: 50px; */ border-bottom: 1px solid #ccc; /* background-color: antiquewhite; */ position: relative; /* 子絕父相 */ } .box input { width: 270px; height: 30px; border: 0; outline: none; /* 輪廓線改成none */ /* position: absolute; */ /* margin-top: 10px; */ /* margin-left: 20px; */ } .box img { position: absolute; top: 2px; right: 2px; /* float: right; */ width: 24px; /* height: 10px; */ } </style> </head> <body> <!-- 明文密碼 --> <!-- 核心思想：點選眼睛的時候，密碼框會變成文字框 --> <!-- 先把CSS樣式寫完 --> <!-- 首先有一個大的盒子,裡面有一個小的盒子和一個a標籤 --> <div class="box"> <input type="password" id="pwd" /> <label for=""> <img src="./imgs/close.png" alt="" id="eye" /> </label> <!-- label經常和input在一起使用 --> </div> <script> // 1.獲取元素 var eye = document.getElementById("eye"); var pwd = document.getElementById("pwd"); // 2.註冊事件 // 點選閉眼睛的時候就改成文字框 var flag = 0; eye.onclick = function () { if (flag == 0) { // 判斷 pwd.type = "text"; eye.src = "./imgs/open.png"; flag = 1; // 重新賦值為1 // 點選一次之後一定要變化 } else { pwd.type = "password"; eye.src = "./imgs/close.png"; flag = 0; //再變回去 } }; // 演算法:利用一個flag變數 </script> </body> </html>