JavaScript-----显示隐藏密码案例

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

Favour72

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

阅读量645

点赞数 1

分类专栏： JavaScript 文章标签： javascript css 前端 css3 html5

本文链接：https://blog.csdn.net/weixin_45904557/article/details/124621546

版权

JavaScript 专栏收录该内容

43 篇文章 5 订阅

订阅专栏

案例分析

1.点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码

2.一个按钮两个状态,点击一次,切换为文本框,再点击一次切换为密码框

3.利用一个flag变量,来判断flag的值,如果是1就切换为文本框,flag设置为0如果是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>Document</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			position: relative;
			width: 400px;
			border: 1px solid #ccc;
			margin: 100px auto;
			background-color: #CCCCCC;
		}

		.box input {
			width: 370px;
			height: 30px;
			border: 0;
			outline: none;
			/* 表单选中边框设置 */
		}

		.box img {
			position: absolute;
			top: 7px;
			right: 2px;
			width: 24px;
		}
	</style>

	<body>
		    <div class="box">
			<!-- lable优化用户体验,让可点击范围变大 -->
			<label for="">
				<img src="img/closeeye.png" id="eye">
			</label>
			<input type="password" name="" id="pwd">
		</div>
	</body>
	<script>
		//获取元素
		var eye = document.getElementById("eye")
		var pwd = document.getElementById("pwd")
		
		//声明一个变量,记录开关状态
		var flag = 0;
		//给图片eye绑定onclick事件,改变input的属性
		eye.onclick = function() {
			//点击一次之后,flag要有变化
			if(flag==0){
				pwd.type = "text";
				eye.src="img/openeye.png"
				flag=1;  //赋值操作
			}else{
				pwd.type = "password"
				eye.src="img/closeeye.png"
				flag=0;
			}
		}
	</script>

</html>