仿京东显示隐藏密码明文

最新推荐文章于 2023-03-07 15:23:18 发布

m_0_1_0_1

最新推荐文章于 2023-03-07 15:23:18 发布

阅读量287

点赞数

分类专栏： Dom 文章标签： javascript

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123747169

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

分析：点击按钮将密码框切换为文本框，并可以查看密码明文。一个按钮有两个状态，点击一次切换文本框，在点击一次切换密码框。

小算法技巧（适用于）：利用一个flag变量（一正一反），通过判断flag的值来进行不同的操作，并且每次执行最后需要把另一种情况的值赋值给flag，便于反复的执行。

思路：首先写出静态页面，然后写js。js的第一步是获取事件源，第二步是注册事件，第三步是添加事件的处理程序。（注：在标签较多的情况下，为标签写上id名便于区分）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            border-bottom: 2px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 260px;
            height: 30px;
            border: none;
            outline: none;
        }
        
        img {
            width: 20px;
            position: absolute;
            right: 10px;
            top: 12px;
            bottom: 2px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
        <img src="./img/bi.png" alt="" id="eye" />
      </label>
        <input type="password" id="pwd" />
    </div>
    <script>
        //第一步 获取事件源
        var pwd = document.getElementById("pwd");
        var eye = document.getElementById("eye");
        var flag = 0;
        //第二、三步 注册事件和添加事件程序
        eye.onclick = function() {
            //点击一次之后，flag的值要发生变化
            if (flag == 0) {
                pwd.type = "text";
                eye.src = "./img/kai.png";
                flag = 1; //赋值操作
            } else {
                pwd.type = "password";
                eye.src = "./img/bi.png";
                flag = 0;
            }
        };
    </script>
</body>

</html>

m_0_1_0_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿京东显示隐藏密码明文

分析：点击按钮将密码框切换为文本框，并可以查看密码明文。一个按钮有两个状态，点击一次切换文本框，在点击一次切换密码框。小算法技巧（适用于）：利用一个flag变量（一正一反），通过判断flag的值来进行不同的操作，并且每次执行最后需要把另一种情况的值赋值给flag，便于反复的执行。思路：首先写出静态页面，然后写js。js的第一步是获取事件源，第二步是注册事件，第三步是添加事件的处理程序。（注：在标签较多的情况下，为标签写上id名便于区分）<!DOCTYPE html><h
复制链接

扫一扫