操作元素之显示密码

要求：

点击按钮将密码框切换为文本框，并可以查看密码明文。

案例分析：

①核心思路：点击眼睛按钮，把密码框的类型改为文本框就可以显示里面的密码；

②一个按钮有两种状态，点击一次切换为文本框，再点击一次切换为密码框；

③算法：利用一个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>

posted on 2020-01-03 16:52 SailorM 阅读(450) 评论(0) 编辑收藏举报