通过使用简单的JavaScript的效果实现密码输入框显示与隐藏的效果

Tea-pd

已于 2022-07-03 15:33:09 修改

阅读量3.5k

点赞数 5

分类专栏： js学习文章标签：前端 javascript css3 js 开发语言

于 2022-07-03 15:31:11 首次发布

本文链接：https://blog.csdn.net/tea_tea_/article/details/125584939

版权

前言：本人是新生小白，JavaScript学的很菜，如有错误之处欢迎指出。

1.首先我们先创建一个html文件

2.然后我们定义一个密码输入框和小眼睛图片（这里我用到是img，也可以用background）

3.接下来我们开始写js部分代码

1.先把input和img接收到

2.然后添加点击事件（注意这里是给图片，也就是小眼睛添加）

1.首先我们先创建一个html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

2.然后我们定义一个密码输入框和小眼睛图片（这里我用到是img，也可以用background）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 20px;
				height: 20px;
				position: absolute;
				left: 180px;
				top: 3px;
			}
			
			div{
				position: relative;
			}
			
		input{
			width: 200px;
		}
		</style>
	</head>
	<body>
		<div>
			<input type="password" name="" id="">
			<img src="./by.png" alt="">
		</div>
		
		
	</body>
</html>

在这里我们提前给input和img设置上基本的css样式

3.接下来我们开始写js部分代码

1.先把input和img接收到


		
		<script>
				var btn = document.querySelector('input');
				var imgs = document.querySelector('img');
				
					
		</script>

2.然后添加点击事件（注意这里是给图片，也就是小眼睛添加）

<script>
				var btn = document.querySelector('input');
				var imgs = document.querySelector('img');
				var flag = true;
				imgs.onclick = function(){
					
					
					}
					
		</script>

3.使用if语句添加判断条件

<script>
				var btn = document.querySelector('input');
				var imgs = document.querySelector('img');
				var flag = true;
				imgs.onclick = function(){
					
					
					if(flag){
						imgs.src = './icon_2.png';
						btn.type = 'text';
					}else{
						imgs.src = './by.png';
						btn.type = 'password';
					}
					flag=!flag
				}
					
		</script>