<head> <style> .box{ position: relative; width: 300px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input{ width: 250px; height: 28px; border:0; outline: none; } .box img{ position: absolute; width:20px; top: 8px; right:7px; } </style> </head> <body> <div class="box"> <label for=""> <img src="images/flase.png" alt="" > </label> <input type="password" name="" id=""> <script> var img =document.querySelector('img') var input =document.querySelector('input') var flag =0 // 点击一次falg进行变化才行 img.onclick =function(){ if(flag==0){ input.type=Text img.src="images/open.png" flag= 1 }else{ input.type='password' img.src='images/flase.png' flag = 0 } } </script>
