任务1：显示和隐藏密码
任务要求：
使用两张不同状态的“眼睛”图片充当按钮功能。
图片中“眼睛”睁开时密码显示，闭合时密码隐藏。
默认情况下，输入的密码是隐藏的，对应闭合状态的“眼睛”。
任务效果图如下:
任务分析：
首先通过img和input等元素搭建密码结构，然后通过JavaScript操作元素的属性，通过更改input元素的type属性完成密码框和文本框的切换，并切换对应的“眼睛”图片。
任务实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="eye.css">
</head>
<body>
<div class="box">
<label>
<img src="images/close.png" id="eye">
</label>
<input type="password" id="pwd">
</div>
<script>
//获取元素
var eye = document.getElementById("eye");
var pwd = document.getElementById("pwd");
//注册事件
eye.onclick = function () {
if (pwd.type == "password") {
pwd.type = "text";
eye.src = "images/open.png";
} else {
pwd.type = "password";
eye.src = "images/close.png";
}
};
</script>
</body>
</html>
CSS样式文件下载：
图片素材下载：
原创视频
