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

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

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

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>

小提醒：input type="password" 的type有多个类型，password是密码，会把输入的内容以点的形式展现出来，text则就是输入的内容

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

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

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

1.先把input和img接收到

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

4.最终代码


<!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>
		
		<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>
	</body>
</html>

相关阅读:
VisualStudio配置OpenCV环境
Day 44 Ansible自动化运维
kotlin 音频播放，多音轨同时播放，音频播放期间，可以随时设置播放速度
elasticsearch8.2集群部署
MATLAB算法实战应用案例精讲-【图像处理】图像识别分类
树状数组的两个操作的证明
特征匹配算法GMS(Grid-based Motion Statistics)理论与实践
Windows server 2016——权限管理与数据恢复
数学建模——图与网络模型及方法（一）
精品基于NET实现的数码新闻发布系统

原文地址：https://blog.csdn.net/tea_tea_/article/details/125584939