JavaScript 仿京东显示隐藏密码

最新推荐文章于 2024-08-04 16:33:59 发布

YinJie…

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量1.5k

点赞数 3

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_49900295/article/details/123274299

版权

javascript 专栏收录该内容

39 篇文章 8 订阅

订阅专栏

我们想要仿照京东登陆页面做一个密码框：
这个密码框部分右侧有一个闭着的小眼睛，此时默认密码框输入的密码是看不见的
在这里插入图片描述
当我们单击这个闭着眼睛的小图标时，图标变成了睁着的眼睛，并且输入的密码也可见了，如下所示：

那么下面附上这个小案例的代码：

<!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>

实现效果：
默认样式:
在这里插入图片描述
当单击小眼睛时：

此案例用到了表单标签label,有的同学已经忘记了，这里附上相关知识点链接：
链接: link.

YinJie…

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
2
评论
JavaScript 仿京东显示隐藏密码

我们想要仿照京东登陆页面做一个密码框：这个密码框部分右侧有一个闭着的小眼睛，此时默认密码框输入的密码是看不见的当我们单击这个闭着眼睛的小图标时，图标变成了睁着的眼睛，并且输入的密码也可见了，如下所示：那么下面附上这个小案例的代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
复制链接

扫一扫