密码的显示与隐藏（js）

最新推荐文章于 2024-04-08 21:28:38 发布

时松

最新推荐文章于 2024-04-08 21:28:38 发布

阅读量304

点赞数

分类专栏：基础文章标签： javascript

本文链接：https://blog.csdn.net/ice_yr/article/details/106960740

版权

基础专栏收录该内容

79 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 400px;
				border-bottom: 1px solid #ccc;
				margin: 100px auto;
				position: relative;
			}
			.box input {
				width: 370px;
				height: 30px;
				border: 0;
				outline: none;
			}
			.box img {
				position: absolute;
				top: 2px;
				right: 2px;
				width: 24px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<label><img src="../apiimg/闭眼.png" id="eye" alt=""></label>
			<input type="password" id="pwd" name="" />
		</div>
		<script type="text/javascript">
			//获取元素
			var eye = document.getElementById('eye');
			var pwd = document.getElementById('pwd');
			//注册事件 程序处理
			var flag = 0;
			eye.onclick = function() {
				// 点击一下flag变化
				if (flag == 0) {
					pwd.type = 'text';
					eye.src = '../apiimg/眼睛.png';
					flag = 1;  //赋值
				} else {
					pwd.type = 'password';
					eye.src = '../apiimg/闭眼.png';
					flag = 0;
				}
			}
			
		</script>
		
	</body>
</html>