js利用变量实现显示密码与隐藏密码

最新推荐文章于 2024-05-09 11:08:12 发布

r-傅科摆

最新推荐文章于 2024-05-09 11:08:12 发布

阅读量722

点赞数

分类专栏：变量文章标签： javascript

本文链接：https://blog.csdn.net/Z56umie/article/details/123752253

版权

变量专栏收录该内容

3 篇文章 0 订阅

订阅专栏

按钮：btn

密码：psw

首先知道，点击一次按钮会使密码的类型转成文本类型，这个好实现，直接

btn.onclick = function () {
    psw.type = 'text';
    }

但是如何再点一次按钮使它变回隐藏状态呢？

思路：需要变回隐藏状态，那就需要知道它现在的状态是什么，现在是显示状态，那么可以通过if语句判断是否是显示状态，如果是，就写出点一次按钮变成隐藏状态的代码；如果是隐藏状态，就写出点一次按钮变成显示状态的代码

判断状态比较麻烦，所以我们可以把某个状态转换成一个简单的数字变量，让数字变量来帮助我们判断。设置一个flag，如果等于0，那么现在的状态是隐藏，需要把密码类型转换成text；如果等于1，就需要把类型转换成password

只有两种情况，所以每一次点击之后，都要重置flag变量的状态，这一次是隐藏，那么下一次就是显示了

完整代码如下：

<body>
    <input type="password" name="" id="">
    <button>显示密码</button>

    <script>
        var psw = document.querySelector('input');
        var btn = document.querySelector('button');
        var flag = 0;
        btn.onclick = function () {
            // 用一个flag变量实现可以点击显示回去
            if (flag == 0) {
                psw.type = 'text';
                flag = 1;
                btn.innerHTML = '隐藏密码';
            } else {
                psw.type = 'password';
                flag = 0;
                btn.innerHTML = '显示密码';
            }
        }
    </script>
</body>

r-傅科摆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js利用变量实现显示密码与隐藏密码

按钮：btn密码：psw首先知道，点击一次按钮会使密码的类型转成文本类型，这个好实现，直接btn.onclick = function () { psw.type = 'text'; }但是如何再点一次按钮使它变回隐藏状态呢？思路：需要变回隐藏状态，那就需要知道它现在的状态是什么，现在是显示状态，那么可以通过if语句判断是否是显示状态，如果是，就写出点一次按钮变成隐藏状态的代码；如果是隐藏状态，就写出点一次按钮变成显示状态的代码判断状态比较麻烦，所以我们可以把某个状
复制链接

扫一扫