案例： JS实现显示隐藏密码框

最新推荐文章于 2022-11-15 19:49:59 发布

00（努力学习版）

最新推荐文章于 2022-11-15 19:49:59 发布

阅读量882

点赞数 1

文章标签： javascript 前端 ecmascript

本文链接：https://blog.csdn.net/m0_61736351/article/details/122799704

版权

这篇博客介绍了一个简单的JavaScript实现，通过点击眼睛图标切换密码框的显示状态。当flag为0时显示密码，为1时显示文本。点击图标会改变密码框的type属性，同时更新眼睛图标的图片源，从而实现查看和隐藏密码的功能。

摘要由CSDN通过智能技术生成

在实现本案例时，要清楚什么时显示隐藏密码框。在我们点击某个图标时，密码框中不可见的密码变为可见的数字，字母和符号的组合。

主要算法：

设置一个flag变量，当flag = 0 时，显示密码（password）；flag= 1时显示，显示文本（text）。

主要思路：

点击眼睛按钮，把密码框类型改为文本框可以看见里面

代码实现：

<style>
        .box{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin:100px auto;
        }
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            position: absolute;
            right: 2px;
            top:2px;
            width: 24px;
            height: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="close.png" alt="" id= "eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
          //获取元素
      var eye = document.getElementById('eye');
      var pwd = document.getElementById('pwd');
      var flag = 0;
          //注册事件 处理程序
      eye.onclick = function(){
          //点击一次后 flag一定要变化
          if (flag == 0){
              pwd.type = 'text';
              eye.src='open.png';
              flag = 1;
          }else{
              pwd.type = 'password';
              eye.src='close.png';
              flag = 0;
          }
      }
    </script>
</body>

需要准备的素材：