DOM——利用变量来进行切换密码的显示隐藏

最新推荐文章于 2024-03-11 18:00:14 发布

北冥有大鹏

最新推荐文章于 2024-03-11 18:00:14 发布

阅读量147

点赞数

分类专栏： DOM学习文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_45328723/article/details/125899577

版权

DOM学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

利用变量来进行切换密码的显示隐藏

<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;
            top: 5px;
            right: 5px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/by.jpg" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    <script>
        //1.获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //2.注册事件 处理程序
        var flag = 0;//定义一个flag 初始值为0 
        eye.onclick = function () {
            //点击一次之后，flag 一定要变化
            if (flag == 0) { 
                pwd.type = 'text'; //显示密码
                eye.src = 'images/zy.jpg';
                flag = 1;//赋值操作  显示密码后flag变成1
            } else {
                pwd.type = 'password';
                eye.src = 'images/by.jpg';
                flag = 0;//隐藏密码后  flag变成0
            }


        }


    </script>

</body>