案例分析：
1 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码；
2 一个按钮，两个状态，点击一次，改为文本框，继续点击一次变成密码框；
3 算法：利用一个flag变量，来判断flag的值，如果是1就切换文本框，flag设置为0，如果是0就切换为密码框，flag设置为1；
代码如下（大佬勿喷）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
#div{ width: 500px; height:250px ; background-color: aquamarine; margin: 150px 0 0 660px; border-radius: 15px;}
h3{ font-size: 20px;}
.input{ width: 200px; height: 30px; outline: none; border: none; margin: 15px 0 0 150px;}
.input{ width: 200px; height: 30px; outline: none; border: none; margin: 15px 0 0 150px;}
.x_ps{ width: 30px; height: 30px; border: none; position: relative; top: 10px; left: -5px;}
</style>
</head>
<body>
<div id="div">
<h3 align="center">login</h3>
<input class="input" type="text" placeholder="帐号" />
<input id="pws" class="input" type="password" placeholder="密码" />
<img class="x_ps" src="http://p4.so.qhimgs1.com/t028d0db67fe317aabc.jpg" id="eye" />
<input class="input" type="submit" value="登录" />
</div>
<script>
//1. 获取元素
var eye = document.getElementById("eye");
var psw = document.getElementById("pws");
// 1. 注册事件 执行程序
var flag = 0;
eye.onclick = function() {
//点击一次之后 flag 一定要变化
if(flag == 0){
psw.type = "text";
eye.src = "http://p1.so.qhimgs1.com/t02ac4a7d589a7295ef.jpg";
flag = 1;//赋值操作
}else {
psw.type = "password";
eye.src = "http://p4.so.qhimgs1.com/t028d0db67fe317aabc.jpg";
flag = 0;
}
}
</script>
</body>
</html>