具体代码如下：
<!-- 只需要一个input密码框和一张图片即可 -->
<div>
<input type="password" class="box1">
<img src="./闭眼.png" alt="" class="t1">
</div>
<script>
var box = document.querySelector('div')
//声明一个变量box，使用document.querySelector ('div') 获取div
//接着给div添加样式让其居中显示
box.style.width = '600px'
box.style.height = '400px'
box.style.margin = '0 auto'
var box1 = document.querySelector('.box1')
//给input声明一个变量box1，使用document.querySelector('.box1') 获取input
box1.style.width = '400px'
box1.style.height = '50px'
box1.style.outline = 'none'//让其不获取焦点
var img = document.querySelector('img')
//给img声明一个变量，使用document.querySelector('img') 获取img
img.onclick = function () {//给img添加点击事件
if (box1.type ==='text') {//判断input的是文本框的时候
box1.type = 'password'//将其文本框改为密码框
img.src="./闭眼.png"//图片为闭眼，让其呈现暗文的效果
}else{//若为密码框时就将其改为文本框
box1.type = 'tetx'
img.src="./睁眼.png"//图片为睁眼，让其呈现明文的效果
}
}
</script>
