2.用js实现显示和隐藏密码

雨点打透心脏的1/2处 2022-12-12 04:38 251阅读 0赞

css代码如下：

<style> *{            
   margin: 0;      
   padding: 0;       
    }       
 input{          
   border: none;         
   outline: none;         
   padding-bottom: 8px;      
     }       
  .box{          
    width: 300px;
    border-bottom: 1px solid #eee;
       margin: 100px auto;       
      }        
  img {            
   width: 25px;            
   cursor: pointer;        
   }
    </style>

HTML代码如下：

<div class="box">        
 <input type="password" name="" id="">       
  <img src="./image/close.png" alt="">    
  </div>

js代码如下：

<script>        
 var img = document.querySelector('img')        
 var input = document.querySelector('input')        
 // 创建变量，用于控制input的状态变化 
 var flag = false        
 img.onclick = function(){             
 if (flag == false){                
  input.type = 'text'                
  this.src='./image/open.png'                
  flag=true            
  }else{                 
  input.type='password'                
  this.src='./image/close.png'            
  }        
  }    
  </script>