前端案例——1.仿京东显示隐藏密码明文案例。

飞天小女侠~

已于 2022-03-29 09:41:40 修改

阅读量1.2k

点赞数 1

分类专栏：前端案例练习文章标签：前端 javascript elementui

于 2022-03-01 17:17:11 首次发布

本文链接：https://blog.csdn.net/xuan971130/article/details/123210883

版权

前端案例练习专栏收录该内容

29 篇文章 2 订阅

订阅专栏

<!-- 仿京东显示隐藏密码明文案例 -->
<!-- 核心思路：点击眼睛按钮，把密码框改为文本框就可以看见里面的密码。 -->
<!-- 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框 -->
<!-- 算法：利用flag变量，判断flag的值，是1就切换为文本框，同时flag置0；是0就切换为密码框，同时flag置1 -->
<head>
    <style>
        /*  border-bottom只显示下面的线。在写的时候，可以先设置border，这样就显示box的范围了，后面慢慢改 */
        .box{
            position: relative;/*子绝父相，子绝对父亲相对*/
            width:400px;
            border-bottom: 1px solid #ccc;
            margin:100px auto;
        }
        .box input{
            width:370px;
            height: 50px;
            border:0;/* input 默认有边界框，设置boder 0就不显示input的边界框了*/
            outline:none;/* input输入框，点击时会出来边界框。设置为none以后，边界框就消失了。 */
        }
        .box img{
            position: absolute;
            top:20px;
            width:30px;
            right:8px

        }
    </style>
</head>
<body>
    <div class = "box">
        <label for="">
            <img src="images/close_eye.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pawd_input">
        <script>
            var eye = document.getElementById('eye');
            var pawd_input = document.getElementById('pawd_input');
            var flag = 1;
            eye.onclick = function(){
                if(flag == 1){
                    this.src = 'images/open_eye.png';
                    pawd_input.type = 'text';
                    flag = 0;
                }else{
                    this.src = 'images/close_eye.png';
                    pawd_input.type = 'password';
                    flag = 1;
                }
            }

        </script>
    </div>

</body>

飞天小女侠~

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端案例——1.仿京东显示隐藏密码明文案例。

<head> <style> /* border-botto.
复制链接

扫一扫