点击切换密码框

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            margin: 50px auto;
            border-bottom: solid 1px #313131;
        }

        .box input {
            width: 400px;
            height: 40px;
            border: none;
            outline: none;
        }
        .box img {
            position: absolute;
            top: 15px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>
<body>
<div class="box">
    <label for="">
        <img src="image/close.png" alt="" id="eyes">
    </label>
    <input id="pwd" type="password">
</div>
<script>
    //1 获取元素
    var eyes = document.getElementById('eyes');//获取小眼睛图片对象
    var pwd = document.getElementById('pwd');//获取密码输入input元素对象
    //2 注册事件 处理程序
    var flag = 0; //默认0是闭眼密码状态

    eyes.onclick = function () {
        if (flag == 0) {
            pwd.type = 'text';
            eyes.src = 'image/open.png';
            //点击一次以后 flag一定要变化 否则一直是0
            flag = 1;//赋值操作
        } else {
            pwd.type = 'password';
            eyes.src = 'image/close.png';
            flag = 0;//赋值操作  flag复位
        }
    }
</script>
</body>
</html>

 

posted @ 2021-02-24 10:41  棉花糖88  阅读(82)  评论(0)  编辑  收藏  举报