<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 400px;
margin: 100px auto;
}
</style>
</head>
<body>
<div>
<input type="password">
<button>显示/隐藏</button>
</div>
<script>
// 密码显示 实现的思想：更改表单类型 由password 转变为 text 类型
var btn = document.querySelector('button'); //获取 显示/隐藏 按钮
var input = document.querySelector('input'); //获取 表单
var index = 0; // 使用变量 作为判断桥梁 以实现 显示 隐藏交替
btn.addEventListener('click', function () {
if (index === 0) {
input.type = 'text'; // 更改表单类型为 text 实现 显示密码
index = 1;
} else {
input.type = 'password'; // 更改表单类型为 password 实现隐藏
index = 0;
}
})
</script>
</body>
</html>
