<html>
<div>
<img src="./close.jpg" alt="" id="eye" />
<input type="password" placeholder="请输入密码" id="pwd" />
</div>
</html>
<script>
//1. 获取元素
var pwd = document.getElementById("pwd");
var eye = document.getElementById("eye");
var change = 0; //设置一个变量
//2. 添加事件
eye.onclick = function () {
if (change == 0) {
pwd.type = "text";
eye.src = "./open.jpg";
change = 1;
} else {
pwd.type = "password";
eye.src = "./close.jpg";
change = 0;
}
};
</script>
<style>
img {
width: 20px;
position: absolute;
right:5px;
top:8px;
}
div {
width: 300px;
border-bottom: 1px solid #ccc;
position: relative;
}
input {
border: 0;
outline: none; /*去掉input框的边框*/
}
</style>
