明文暗码:实际上就是密码框和文本框的切换.
看到别人输入密码的时候 旁边有个小眼睛,点击后就可以把密码显示出来了,再点击又隐藏了,所以今天自己也简单的做一下.发现还是很简单就完成这个案例了.
HTML和css代码块
<style>
.box{
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
text-align: center;
line-height: 30px;
margin: 100px auto;;
}
input{
margin-top: 20px;
margin-left: 20px;
width: 200px;
}
img{
position:absolute;
top: 100px;
left: 262px;
width: 15px;
height: 12px;
opacity: 0.6;
}
</style>
**html 代码**
<div class="box">
<p>
账 号<input type="text" value="">
</p>
<p>
密 码<input type="password" id="pwd">
<img src="close.jpg" alt="" id = "eye">
</p>
<button id="btn1">重置</button>
<button id="btn2">确定</button>
</div>
js模块
<script>
var eye = document.getElementById("eye");
var pwd = document.getElementById("pwd");
//这里要做一个简单的算法,如果是1就变成文本框,如果是0就变成密码框.
var a = 0;
eye.onclick =function(){
//点击后改变成文本框,再点击就变回密码框.
if( a == 0 ){
pwd.type = "text";
eye.src = "open.jpg";
a = 1;
}else{
pwd.type = "password";
eye.src = "close.jpg";
a = 0;
}
}
</script>
成果图
小眼睛是两个小图片可以换成自己喜欢的.