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>效果如下：
