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

不管现实多么惨不忍睹,都要持之以恒地相信,这只是黎明前短暂的黑暗而已。不要惶恐眼前的难关迈不过去,不要担心此刻的付出没有回报,别再花时间等待天降好运。真诚做人,努力做事!你想要的,岁月都会给你。js 实现密码框的查看和隐藏,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

 

 

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/158693.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!