实现：
HTML+css+JavaScript实现，在输入框输入密码，点击👀可以转换成明文，再次点击转换为不可见的密码形式。
利用JavaScript的 DOM 操作元素来改变元素里面的属性，实现密码框（密码不可见）和文本框（密码可见）的转换，以及睁眼闭眼图片的转换。
算法：利用flag变量，如果点击时flag值是1（说明当前是密码框）就切换为文本框，同时flag赋值为0；如果点击时flag值是0就切换为密码框，同时flag值赋值为1。跟操作系统的知识好像啊。。。我惊了。
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录-密码明文转换【dom操作元素】【lable】</title>
<style>
.box{
position: relative;
width: 200px;
height: 25px;
margin: 200px auto;
border: black 1px solid;
}
.box img{
position:absolute;
right: 2px;
top: 2px;
width: 20px;
}
.box input{
position: absolute;
top: 2px;
width: 160px;
border: 0;
outline: none;
}
::-ms-reveal{display: none;}
/* 清除input里面自带的眼睛👀 */
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="../../../close.jpg" alt="" id="eye">
</label>
<input type="password" id="psw" placeholder="请输入密码">
</div>
<script>
// 1.获取元素对象
var eye = document.getElementById('eye');
var psw = document.getElementById('psw');
// 2.注册事件，处理程序（事件类型 函数）
var flag = 0; // 一定要在函数前面（外面），不然flag的值永远都是0，永远都无法进行else
eye.onclick = function(){ // 是onlick
if (flag == 0){
psw.type = 'text' ; // 是写元素对象的名字！！不是写标签名!!
eye.src = '../../../open.jpg'; // 已经获取到了eye对象，注意不要写img之类的
flag = 1;
}else {
psw.type = 'password';
eye.src = '../../../close.jpg';
flag = 0;
}
}
</script>
</body>
</html>
易错点：
见注释。
扫一扫
4745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
