html密码显示隐藏小眼睛

最新推荐文章于 2024-08-31 22:26:22 发布

Connie1451

最新推荐文章于 2024-08-31 22:26:22 发布

阅读量6.3k

点赞数

效果：

代码如下：

<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>-->
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<style>
			
			.tubiao {
				width: 30px;
				height: 25px;
				position: absolute;
				/*right: 12%;*/
				left: 12%;
				padding-top: 0px;
				opacity: 0.5;
			}
			
			.tubiao:hover {
				opacity: 1;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {

				$("#dj").click(function() {
					if($("#pass").attr("type") == "text") {
						$("#pass").attr("type", "password");
						$("#dj img").css("opacity", 0.5)
						$("#dj img").attr("src", "img/eye-black.png")
					} else {
						$("#pass").attr("type", "text");
						$("#dj img").css("opacity", 1)

						var img = $("#dj img").attr("src");
						console.log(img)
						if(img == "img/eye.png") {
							$("#dj img").attr("src", "img/eye-black.png")
						} else {
							$("#dj img").attr("src", "img/eye.png")
						}

					}
				});
			});
		</script>
	</head>

	<body>
		<div> 
			<input   id="pass"  type="password"  placeholder="请输入密码：" />
			<a id="dj" class="tubiao" title="点击隐藏或显示密码">
				<img src="img/eye.png" />
			</a>
		</div>
	</body>

</html>

转载自：https://blog.csdn.net/qq_40939905/article/details/81613333

自己修改了一下