通过使用简单的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>

相关阅读:
JavaScript运算符
Redis源码与设计剖析 -- 13.有序集合对象
【云原生之kubernetes实战】在k8s环境下部署Snipe-IT固定资产管理平台
HCIE-Security Day45：AAA和NAC详解
Llama 3 开源了「GitHub 热点速览」
Goby 漏洞发布｜用友 U8 Cloud ActionHandlerServlet 远程代码执行漏洞
javascript 设计模式（读书笔记）
猫狗图像数据集上的深度学习模型性能对比
堆排序算法---C语言实现（超详细解析！！！！）
JVM参数调优

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