仿京东显示隐藏密码明文案例（字体图标实现）

最新推荐文章于 2022-04-27 14:20:40 发布

积沙成塔——

最新推荐文章于 2022-04-27 14:20:40 发布

阅读量396

点赞数 1

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_45308912/article/details/121219999

版权

JavaScript基础专栏收录该内容

78 篇文章 0 订阅

订阅专栏

仿京东显示隐藏密码明文案例（字体图标实现）

眼睛使用的是 iconfont 阿里矢量图标库的内容
链接：https://www.iconfont.cn/search/index? 在这里插入图片描述代码案例展示：
字体图标请查看其他博客自学

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="fontss/iconfont.css" />
		<style>
			#container {
				/* background-color: red; */
				width: 400px;
				height: 48px;
				margin: 100px auto;
				position: relative;
			}
			#pwd {
				width: 400px;
				height: 24px;
				outline: none;
				border: 0px;
				border-bottom: 1px solid lightgray;
			}
			span {
				position: absolute;
				left: 390px;
				top:10px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<lebel for="">
				<span class="iconfont icon-yanjing_xianshi_o" id="eye"></span>
			</lebel>
			<input type="password" id="pwd">
		</div>
		<script>
			var eye = document.querySelector('#eye');
			var pwd = document.querySelector('#pwd');
			var flag = 0; //用来做标记，0表示密码框 1表示文本框
			eye.onclick = function() {
				if (flag == 0) {
					pwd.type="text";
					eye.className="iconfont icon-yanjing_yincang_o";
					flag = 1;
				} else {
					pwd.type="password";
					eye.className="iconfont icon-yanjing_xianshi_o";
					flag = 0;
				}
			}
		</script>
	</body>
</html>

显示效果如下： 在这里插入图片描述

积沙成塔——

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
仿京东显示隐藏密码明文案例（字体图标实现）

仿京东显示隐藏密码明文案例（字体图标实现）眼睛使用的是 iconfont 阿里矢量图标库的内容链接：https://www.iconfont.cn/search/index?<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="fontss
复制链接

扫一扫