短视频商城系统，输入密码时点击可隐藏或显示密码内容

短视频商城系统，输入密码时点击可隐藏或显示密码内容实现的相关代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box {
                width: 400px;
                border-bottom: 1px solid #ccc;
                margin: 100px auto;
                position: relative;
            }
            .box input {
                width: 370px;
                height: 30px;
                border: 0;/*取消边框*/
                outline: none; /*取消选中时出来的文本框边框*/
            }
            .box img {
                position: absolute;
                width: 43px;
                top: -10px;
                right: -1px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <label for="">
                <img src="b.png" alt="" id="eye">
            </label>
            <input type="password" id="pwd">
        </div>
        <script>
            //获取元素
            var eye = document.getElementById('eye');
            var pwd = document.getElementById('pwd');
            //注册事件
            var flag = 0;
            eye.onclick = function() {
                if(flag==0) {
                    pwd.type = 'text';
                    eye.src = 'a.png';
                    flag = 1;
                }
                else{
                    pwd.type = 'password';
                    eye.src = 'b.png';
                    flag = 0;
                }
            }
        </script>
    </body>
</html> 

​       

以上就是 短视频商城系统，输入密码时点击可隐藏或显示密码内容实现的相关代码，更多内容欢迎关注之后的文章

 

posted @ 2022-03-31 14:11  云豹科技-苏凌霄  阅读(30)  评论(0)    收藏  举报