js 实现密码框的查看和隐藏

 

 

大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的panda部落，panda每天与您一起进步 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             li {
 8                 list-style: none;
 9             }
10 
11             .wrap input {
12                 
13                 border: none;
14                 border-bottom: 1px solid #999999;
15                 outline: none;
16                 
17             }
18             .wrap li{
19                 position: relative;
20                 width: 200px;
21             }
22             .img{
23                 width: 20px;
24                 height: 20px;
25                 position: absolute;
26                 right: 10px;
27                 top: 0;
28             }
29         </style>
30     </head>
31     <body>
32 
33         <div class="wrap">
34             <li>
35                 <input type="password" name="" id="psd" value="" placeholder="密码框" />
36                 <div class="img">
37                     <img src="img/hide.png" style="width: 100%;" id="img">
38                 </div>
39             </li>
40         </div>
41         <script type="text/javascript">
42             var pwd = document.getElementById('psd');
43             var img = document.getElementById('img');
44             var flag = 0;
45             img.onclick = function(){
46                 if(flag == 0){
47                     pwd.type = 'text'
48                     img.src = 'img/show.png'
49                     flag = 1
50                 }else{
51                     pwd.type = 'password'
52                     img.src = 'img/hide.png'
53                     flag = 0;
54                     
55                 }
56             }
57             
58         </script>
59     </body>
60 </html>

 

posted @ 2020-06-10 17:49  奔跑的前端猿  阅读(1450)  评论(0)  编辑  收藏  举报