JS实现密码框小眼睛的显示与隐藏(使用字体图标)
JS实现密码框小眼睛的显示与隐藏(使用字体图标)
前端学习路上的小练习，如若不喜，请勿喷。 眼睛使用的是 iconfont 阿里矢量图标库的内容 链接：https://www.iconfont.cn/search/index?searchType=icon&q=%E7%9C%BC%E7%9D%9B&page=2
代码实现
字体图标的引用，麻烦自学我就不多概述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="../.././font/font_2099015_z5uhbhlgbqn/iconfont.css">
<style>
.box {
position: relative;
width: 300px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 230px;
height: 30px;
border: 0;
outline: none;
}
.box span {
position: absolute;
top: 6px;
right: 1px;
width: 20px;
}
</style>
</head>
<body>
<div class="box">
<lable for="">
<span class="iconfont icon-yanjing-bi" name="eye" id="eye"></span>
</lable>
<input type="password" name="pwd" id="pwd">
</div>
<script>
var eye = document.getElementById(eye);
var pwd = document.getElementById(pwd);
var flag=0; // 设置变量记录变换状态 1 为文本框 0 为密码框
eye.onclick = function() {
if(flag==0) {
pwd.type = text;
eye.className = iconfont icon-yanjing; // className 引用字体图标 *关键
flag=1;
}
else {
pwd.type = password;
eye.className = iconfont icon-yanjing-bi;
flag=0;
}
}
</script>
</body>
</html>
刚开始学习前端，小菜鸟，希望能帮到大家。
