JS(JavaScript)入门设置密码框中点击小眼睛显示隐藏所输入的密码！

Laila ·

更新时间:2024-11-13

· 566 次阅读

表单中点击小眼睛显示隐藏密码框中的密码！

准备：
1.两张png图片，一张睁眼，一张闭眼，可以到阿里巴巴矢量图库寻找（免费下载）

网站链接
https://www.iconfont.cn/

在这里插入图片描述

最终效果图

在这里插入图片描述

css样式部分，样式可根据自己喜好设置，没有过硬要求


        div:first-child {
            width: 300px;
            height: 50px;
            background-color: red;
            color: white;
            margin: 20px auto;
            text-align: center;
            line-height: 50px;
        }
       div:nth-child(2) {
            position: relative;
            width: 300px;
            height: 50px;
            margin: 100px auto;
        }
        input {
            width: 300px;
            height: 46px;
            border: 0px white;
            border-bottom: 1px solid black;
            outline: none;
        }
        #eyes {
            width: 18px;
            position: absolute;
            top: 27px;
            right: 2px;
        }

主体部分

  
        密码

js部分


            //获取元素（两种方式都可以）
        var input = document.querySelector('input')
        var imgs = document.getElementById('eyes');
        //下面是一个判断每次点击的效果
        var flag = 0;
        imgs.onclick = function () {
            if (flag == 0) {
                input.type = 'text';
                eyes.src = '2.png';//睁眼图
                flag = 1;
            } else {
                input.type = 'password';
                eyes.src = '1.png';//闭眼图
                flag = 0;
            }
        }

如果觉得对您有帮助，点点赞，关注关注哟

在这里插入图片描述