webApi小案例三：实现密码的显示与隐藏功能

最新推荐文章于 2024-03-01 09:44:29 发布

秃头桑

最新推荐文章于 2024-03-01 09:44:29 发布

阅读量310

点赞数

分类专栏： api小案例文章标签： css javascript html5 html css3

本文链接：https://blog.csdn.net/qq_45052409/article/details/107450147

版权

api小案例专栏收录该内容

7 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }

        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            /* 取消点击后的样式 */
            outline: none;
        }

        .box img {
            width: 20px;
            position: absolute;
            top: 10px;
            right: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="">
        </label>
        <input type="password" name="" id="">
    </div>

    <script>
      
        // 点击按钮将密码框换位文本框，并可以查看密码明文
        /*
            1.点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
            2.一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
            3.利用一个judge变量，让它等于0，判断judge的值，如果是1就切换为文本框，judge设置为0，如果是0就切换为密码框，judge设置为1
        */
        // 1.获取元素
        var img = document.querySelector('img')
        var input = document.querySelector('input');

        // 2.注册事件  处理程序
        var judge = 0;
        // 让眼睛睁开  里面的密码显示为文本
        img.onclick = function () {
            // 点击一次后，flag 一定要变化
            if (judge == 0) {
                img.src = 'images/open.png';
                input.type = 'text';
                judge = 1; // 赋值
            } else {
                img.src = 'images/close.png'
                input.type = 'password'
                judge = 0
            }
        }
        
    </script>
</body>

</html>

由于秃头桑的知识能力有限，如果有写的不对的地方，还请各位大佬批评指正，各位小伙伴如果有什么想和秃头桑说的欢迎在下方留言哦。

秃头桑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webApi小案例三：实现密码的显示与隐藏功能

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { .
复制链接

扫一扫