要求：
点击按钮将密码框切换为文本框，并可以查看密码明文。
案例分析：
①核心思路：点击眼睛按钮，把密码框的类型改为文本框就可以显示里面的密码；
②一个按钮有两种状态，点击一次切换为文本框，再点击一次切换为密码框；
③算法：利用一个flag变量，flag=1时就切换为文本框，并将flag设置为0；flag=0时就切换为密码框，并将flag设置为1。
效果：
（黄色亮光和左上角都是GIF制作过程中产生的）
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF_8"> 5 <title>仿京东显示密码</title> 6 <style> 7 .box{ 8 position: relative; 9 width: 400px; 10 border-bottom: 1px solid gray; 11 margin: 100px auto; 12 } 13 .box input{ 14 width: 370px; 15 height: 30px; 16 border: 0; 17 outline: none; 18 } 19 .box img{ 20 position: absolute; 21 top: 5px; 22 left: 360px; 23 width: 24px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="box"> 29 <label for=""> 30 <img src="img/close.png" alt="" id="eye"> 31 </label> 32 <input type="password" name="" id="pwd"> 33 </div> 34 35 <script> 36 //1.获取元素 37 var eye = document.getElementById("eye"); 38 var password = document.getElementById("pwd"); 39 //2.注册事件 处理程序 40 var flag = 1; 41 eye.onclick = function(){ 42 if(flag == 1){ 43 password.type = "text"; 44 eye.src = "img/open.png"; 45 flag = 0; 46 }else{ 47 password.type = "password"; 48 eye.src = "img/close.png"; 49 flag = 1; 50 } 51 } 52 </script> 53 </body> 54 </html>