js处理显示隐藏密码案例分析附代码教程

js处理显示隐藏密码案例，点击按钮将密码框切换为文本框,并可以查看密码明文。

js处理显示隐藏密码案例

案例分析：①核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码
②一个按钮两个状态，陆次，切换为文本框,继续点击次切换为密码框
③算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框, flag设置为0 ,如果是0就切换为密码框, flag设置为1

JavaScript案例代码：

1.     <input type="password" id='pwd'> <button>显示密码</button>
   
2.     <script>
   
3.         var pwd = document.querySelector('#pwd');
   
4.         var btn = document.querySelector('button');
   
5.         var flag = 0;
   
6.         btn.onclick = function() {
   
7.             if (flag == 0) {
   
8.                 this.innerHTML = '显示隐藏';
   
9.                 pwd.type = 'text';
   
10.                 flag = 1;
    
11.             } else {
    
12.                 this.innerHTML = '显示密码';
    
13.                 pwd.type = 'password';
    
14.                 flag = 0;
    
15.             }
    
16.         }
    
17.     </script>

复制代码

这里主要是利用了个flag作为桥梁处理显示隐藏操作。