一、密码登录页面
1.完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h3 {
text-align: center;
margin: 10px 0;
}
.box-account {
width: 400px;
height: 36px;
line-height: 32px;
border: 1px solid #ccc;
margin: 40px auto;
}
.box-account input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box-pwd {
position: relative;
width: 400px;
height: 36px;
line-height: 32px;
border: 1px solid #ccc;
margin: 40px auto;
}
.box-pwd input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
/* 去除游览器默认的密码显示图标 */
input[type="password"]::-ms-reveal {
display: none;
}
.box-pwd img {
position: absolute;
top: 5px;
right: 2px;
width: 24px;
}
button {
display: block;
width: 200px;
height: 36px;
line-height: 36px;
border: 0;
background: #ccc;
font-size: 14px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>密码登录</h3>
<!-- 账号框 -->
<div class="box-account">
<input type="text" name="" id="account">
</div>
<!-- 密码框 -->
<div class="box-pwd">
<label for="">
<img src="./images/隐藏密码.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<!-- 登录按键 -->
<button type="submit">登   录</button>
<script>
// 获取元素
let eye = document.getElementById('eye');
let pwd = document.getElementById('pwd');
// 注册事件 处理程序
let flag = 0;
eye.onclick = function () {
// 点击一次后 flag变化
if (flag == 0) {
pwd.type = 'text';
eye.src = "./images/显示.png";
flag = 1;
} else {
pwd.type = 'password';
eye.src = "./images/隐藏密码.png";
flag = 0;
}
}
</script>
</body>
</html>
2.JavaScript代码如下:
<script>
// 获取元素
let eye = document.getElementById('eye');
let pwd = document.getElementById('pwd');
// 注册事件 处理程序
let flag = 0;
eye.onclick = function () {
// 点击一次后 flag变化
if (flag == 0) {
pwd.type = 'text';
eye.src = "./images/显示.png";
flag = 1;
} else {
pwd.type = 'password';
eye.src = "./images/隐藏密码.png";
flag = 0;
}
}
</script>
二、总结
JS代码的作用是在当前作用域中创建一个名为flag的变量,并将其初始化为数值0,然后可以通过改变flag的值0,1来表示。
点击一次eye图标,当flag=0时,输入框类型为文本框,图标为显示.png;然后把1赋值给flag,输入框类型为密码框,图标为隐藏密码.png,然后把0赋值给flag,进入循环。