效果图：?
这是显示密码，有个睁开的小眼睛
这是密码框，有个不让观看的小眼睛?
?
?核心思路：
绑定小眼睛的img和input
点击img时，有点击触发事件，让密码框变成文本框，图片换成睁开的眼睛
再次点击img时，又有点击触发事件，文本框让变成密码框，图片换成闭上的眼睛
<style>
* {
padding: 0;
margin: 0;
}
div,
input {
box-sizing: border-box;
}
.box {
margin-top: 100px;
margin-left: 200px;
width: 410px;
border-bottom: 1px solid #ccc;
}
input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
img {
width: 25px;
}
</style>
</head>
<body>
<div class="box">
<input type="password" name="" id="input">
<img src="images/eye3.jpg" alt="">
</div>
<script>
// 获取元素
var input = document.querySelector('#input');
var img = document.querySelector('img');
// 注册事件 处理程序
var flag = 0;
img.onclick = function() {
if (flag == 0) {
input.type = 'text';
this.src = 'images/eye4.jpg';
flag = 1;
} else if (flag == 1) {
input.type = 'password';
this.src = 'images/eye3.jpg';
flag = 0;
}
}
</script>
