案例：京东登录页面

最新推荐文章于 2022-04-26 19:41:30 发布

并不傻的狍子

最新推荐文章于 2022-04-26 19:41:30 发布

阅读量766

点赞数 1

分类专栏： # JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_40836442/article/details/115633569

版权

JavaScript基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用HTML、CSS和JavaScript实现类似京东登录页面的显示密码功能。通过点击眼睛图标，可以切换密码框的类型，显示或隐藏密码。源代码中详细展示了样式设计和事件监听，当点击眼睛图标时，会切换密码框的type属性，从而实现密码可见或不可见的效果。此外，还包含了登录按钮的点击事件，用于弹出用户名和密码的提示对话框。

摘要由CSDN通过智能技术生成

一、案例，仿京东显示密码：

核心思路：

① 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码

② 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框

③ 算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1

二、本人最终实现的样式：

三、源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* width: 1000px; */
            position: relative;
            height: 500px;
            width: 800px;
            text-align: center;
            background-color: rgba(146, 183, 240, 0.3);
            /* border-bottom: 1px solid #ccc; */
            margin: 100px auto;
            border-radius: 10px;
        }
        
        .box label {
            width: 570px;
            height: 100px;
            font-family: '微软雅黑';
            font-size: 24px;
            line-height: 100px;
        }
        
        .box input {
            width: 570px;
            height: 30px;
            border: 0;
            outline: none;
            border-bottom: 1px solid #ccc;
            background-color: rgba(239, 241, 199, 0.1);
            color: gray;
        }
        
        .box button {
            width: 570px;
            height: 40px;
            border: 0;
            outline: none;
            border-radius: 15px;
            background-color: rgba(207, 93, 93, 0.8);
            font-size: 15px;
            font-weight: 700;
            color: white;
        }
        
        .boxPsw {
            position: relative;
            text-align: center;
        }
        
        .eyeImg {
            width: 20px;
            position: absolute;
            top: 5px;
            right: 200px;
        }
        
        .wangjimimaLabel {
            font-size: 5px;
            color: gray;
            position: absolute;
            top: 7px;
            right: 130px;
        }
        
        a {
            text-decoration: none;
            color: gray;
        }
    </style>
</head>

<body>
    <div class="box">
        <br><br>
        <label>京东登录</label><br>
        <input type="text" name="yhm" id="yhm" value="用户名/邮箱/已验证手机"><br>
        <div>
            &nbsp
        </div>
        <div class="boxPsw">
            <input type="password" name="psw" id="psw">
            <img class="eyeImg" src='images/close.png' id='eye'>
            <span class="wangjimimaLabel">| &nbsp <a href="#">忘记密码</a></span>
        </div>
        <br><br>
        <button id='denglu'>登 录</button>
        <br><br>
        <div>
            <span style="position: absolute;left: 120px;font-size: 5px;color: gray;">短信验证码登录</span>
            <span style="position: absolute;right: 120px;font-size: 5px;color: gray;"><a href="http://www.baidu.com">手机快速注册</a></span>
        </div>
    </div>


    <script>
        document.body.style.backgroundColor = 'rgba(227, 179, 179, 0.3)';
        var yhm = document.getElementById('yhm');
        var eye = document.getElementById('eye');
        var psw = document.getElementById('psw');
        var dengluButton = document.getElementById('denglu');
        var usename = '',
            password = '';

        yhm.onclick = function() {
            this.value = '';
        }
        eye.onclick = function() {
            if (psw.type == 'password') {
                this.src = 'images/open.png';
                psw.type = 'text';
            } else {
                this.src = 'images/close.png';
                psw.type = 'password';
            }
        }
        dengluButton.onclick = function() {
            usename = yhm.value;
            password = psw.value;
            alert('用户名：' + usename + '\n' + '密码：' + password);
        }
    </script>
</body>

</html>