JS实现密码框小眼睛的显示与隐藏(使用字体图标)
前端学习路上的小练习，如若不喜，请勿喷。
眼睛使用的是 iconfont 阿里矢量图标库的内容
链接：/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>
刚开始学习前端，小菜鸟，希望能帮到大家。
