JS实现密码框的显示密码和隐藏密码简单功能

1.准备素材打开网页：https://www.iconfont.cn/阿里巴巴矢量库找到两个素材，下载即可2.代码部分<style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 37

林池

6791人浏览 · 2021-12-07 08:35:43

林池 · 2021-12-07 08:35:43 发布

1.准备素材
打开网页：https://www.iconfont.cn/ 阿里巴巴矢量库

在这里插入图片描述

找到两个素材，下载即可

2.代码部分

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

<body>
    <div class="box">
        <input type="password" id="input">
        <img src="../img/close.png" id="eye">
    </div>

    <script>
        // 1.获取元素
        var input = document.getElementById('input');
        var eye = document.getElementById('eye');
        var flag = 0;
        // 2.注册事件 处理程序
        eye.onclick = function () {
        	// 应用flag 可以实现循环点击
            if (flag === 0) {
                // 点击一次后 flag 一定要变化
                input.type = 'password';
                // 修改 -图片路径
                eye.src = "../img/close.png";
                flag = 1;//赋值操作
            } else{
                input.type = 'text';
                // 修改 -图片路径
                eye.src = "../img/open.png";
                flag = 0;
            }

        }
    </script>