<style>
.box{
position: relative;
width: 400px; //宽度
border-bottom: 1px solid #ccc; //设置下边框
margin: 100px auto ;
}
.box input{
width: 370px; //输入框宽度
height: 30px; //高度
border: 0; //输入框边框0
outline: none;
}
.box img{
position: absolute; //子绝父相
top: 10px;
right: 2px;
width: 20px;
}
</style>
CSS代码展示
<div class="box">
<label>
<img src="img/bi.jpg" id="tu" />
</label>
<input type="password " id="pwd" />
</div>
HTML代码
<script>
var tu = document.getElementById('tu'); //获取tu和pwd
var pwd = document.getElementById('pwd');
var flag = 0; //定义一个flag
tu.onclick = function(){
//判断
if(flag == 0){
pwd.type = "text";
tu.src = "img/zheng.jpg";
flag = 1;
}else{
pwd.type = "password";
tu.src = "img/bi.jpg";
flag = 0;
}
}
</script>
首选还是利用id获取tu和pwd
赋值一个flag=0
设置点击事件
利用if语句判断,如果flag==0,则点击后变成明文,即pwd.type样式改成文本框text,同时赋值flag=1
反之,如果flag==1,则点击后变成密文,即pwd.type样式改成文本框password,同时赋值flag=0
注:仅限于个人理解,用于学习。