核心算法:利用flag变量,判断flag变量的值,若为1则切换文本框(显示密码),若为0则切换密码框(隐藏密码)
css部分:
//盒子样式
.box{
position: relative;//定位
width: 400px;
border-bottom: 1px solid red;
margin:100px auto;
}
//输入框样式
.box input{
width: 370px;
height: 30px;
border: 0ch;
outline: none;
}
//图片样式(小眼睛)
.box label img{
position: absolute;
top: 2px;
right: 2px;
width: 26px;
height: 26px;
}
html部分:
<div class="box">
<label for="">
<img src="lmt.jpg" alt="" id="eye">
</label>
<input type="password" name="" id="pwd" >
</div>
js部分:
var eye = document.getElementById('eye')
var pwd = document.getElementById('pwd')
var flag = 0
//点击一次之后 flag发生变化
eye.onclick = function(){
if(flag == 0){
pwd.type = 'text'
eye.src = 'lmt1.jpg'
flag = 1 //重新赋值
}
else{
pwd.type = 'password'
eye.src = 'lmt.jpg'
flag = 0 //重新赋值
}
}
学自黑马pink前端