代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 50px;margin: 100px auto;position: relative;border: 1px solid rgb(226, 223, 223);}input{height: 40px;width: 200px;outline: none;border: none;}.box span{height: 40px;width: 50px;position: absolute;background: url(./img/open.png) no-repeat;right: 0;}.box .active{background: url(./img/close.png) no-repeat;}</style>
</head>
<body><div class="box"><input type="text" name="" id=""><span></span></div><script>const span=document.querySelector('.box span')const ipt=document.querySelector('input')//定义一个开关变量let flag=truespan.addEventListener('click',function() {this.classList.toggle('active')//为真 输入框类型为密码框if(flag){ipt.type='password'flag=!flag}else{//否则为文本框ipt.type='text'flag=!flag}})</script>
</body>
<ml>
