黑马前端案例——模拟京东显示密码

已于 2022-05-04 18:18:01 修改
阅读量225 收藏
点赞数
文章标签： javascript html5
于 2021-06-06 18:46:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46102725/article/details/117630755
版权

模拟京东显示密码

点击输入密码框后的眼睛改变输入框的类型

这是pink老师的视频中的一个案例，自己先做一遍再看老师的步骤，因为老师的视频是几年前的，以下是我看的代码（写的不太规范）

实现效果

图片:
在这里插入图片描述
当密码框的眼睛是闭上时，密码不可见

点击‘眼睛’，密码可见: 在这里插入图片描述

以下是我的代码

总：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background-color: rgb(236, 236, 236);
        }
        
        li {
            list-style: none;
        }
        
        p {
            float: left;
            padding: 10px 0;
            width: 100%;
            font-size: 12px;
            background-color: #fff8f0;
        }
        
        a {
            text-decoration: none;
        }
        
        em {
            font-style: normal;
        }
        
        input::-ms-reveal {
            display: none;
        }
        /* 取消password的眼睛 */
        
        .box {
            margin: 10px auto;
            position: relative;
            text-align: center;
            width: 345px;
            height: 400px;
            background-color: white;
        }
        
        .atten {
            display: inline-block;
            vertical-align: middle;
            height: 16px;
            width: 16px;
            /* background-color: skyblue; */
        }
        
        .atten img {
            height: 100%;
            width: 100%;
        }
        
        .nav {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            height: 55px;
            width: 100%;
            background-color: #fff;
            border-bottom: 1px solid #f4f4f4;
        }
        
        .nav span {
            display: inline-block;
            width: 100%;
            font-size: 18px;
            font-weight: 500;
            color: #666;
            line-height: 55px;
        }
        /* .nav span:checked {
            font-weight: bolder;
            color: #e4393c;
        } */
        
        .nav span:first-child::after {
            float: right;
            content: '|';
            font-weight: lighter;
            color: #f4f4f4;
        }
        
        .center {
            position: relative;
            margin: 33px 19.5px 0 19.5px;
            width: 306px;
            height: 191.6px;
            /*  background-color: skyblue; */
        }
        
        .center ul li {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
            /* display: inline-block; */
            width: 100%;
            height: 40px;
            /* background-color: slateblue; */
            border: 1px solid #bdbdbd;
        }
        
        .center ul li span {
            /* box-sizing: border-box; */
            float: left;
            width: 40px;
            height: 40px;
            border-right: 1px solid #bdbdbd;
        }
        
        .center ul li span img {
            height: 100%;
            width: 100%;
        }
        
        .center ul li input {
            border: 0;
            border-radius: 0;
            float: left;
            height: 100%;
            width: 265px;
            outline: none;
            /* background-color: pink; */
        }
        
        .center ul li input::placeholder {
            padding: 15px;
            font-weight: lighter;
            font-size: 13px;
        }
        
        .center ul li:nth-child(2) input {
            width: 225px;
        }
        
        .center ul li:nth-child(2) span:nth-of-type(2) {
            position: absolute;
            right: 10px;
            height: 18px;
            width: 18px;
            border: 0;
            /* background-color: pink; */
        }
        
        .forget {
            position: absolute;
            right: 0;
            bottom: 49px;
            /*  background-color: slateblue; */
            color: #666;
            font-size: 8px;
        }
        
        .forget:focus-visible {
            text-decoration: underline;
            font-weight: bolder;
            color: #e4393c;
        }
        
        button {
            position: absolute;
            bottom: 0;
            left: 0;
            outline: none;
            width: 100%;
            height: 33px;
            font-size: 20px;
            /*     font-weight: 600; */
            color: white;
            background-color: #e4393c;
            border: 1px solid #cb2a2d;
            border-radius: 0;
        }
        
        .footer {
            display: flex;
            align-items: center;
            padding: 0 20px;
            position: absolute;
            bottom: 0;
            border-top: 1px solid #f4f4f4;
            width: 305px;
            height: 50.78px;
            background-color: #fcfcfc;
        }
        
        .footer span {
            float: left;
            width: 49px;
            font-size: 5px;
            font-weight: lighter;
            color: #666;
        }
        
        .footer span em {
            display: inline-block;
            width: 19px;
            height: 19px;
        }
        
        .footer span:hover {
            color: #e4393c;
            text-decoration: underline;
        }
        
        .footer span em img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }
        
        .footer .now {
            height: 16px;
            width: 70px;
            flex: 2;
            position: absolute;
            right: 20px;
            color: #e4393c;
        }
        
        .footer .now em {
            width: 16px;
            height: 16px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>
            <span class="atten"><img src="../images/注意.png"></span> 京东不会以任何要求您转账汇款，精防诈骗
        </p>

        <div class="nav">
            <span>扫码登录</span>
            <span>账户登录</span>
        </div>

        <div class="center">
            <ul>
                <li>
                    <span><img src="../images/user.png"></span>
                    <input type="text" Placeholder='邮箱/用户名/登录手机'>
                </li>
                <li>
                    <span><img src="../images/keyword.png"></span>
                    <input type="password" placeholder="密码">
                    <span><img src="../images/no-see.png"></span>
                </li>
            </ul>
            <a href="https://aq.jd.com/process/findPwd?s=1" class="forget">忘记密码</a>
            <button>登                  录</button>
        </div>

        <div class="footer">
            <span class="QQ">
                <em><img src="../images/QQ.png"></em>
                QQ
            </span>
            <span>|</span>
            <span class="wchat">
                <em><img src="../images/Wechat.png"></em>
                微信
            </span>
            <span class='now'>
                <em><img src="../images/注册.png"></em>
                立即登录
            </span>
        </div>
    </div>
    <script>
        /* 获取密码‘眼睛’ */
        var eyes = document.querySelector('.center ul li:nth-child(2) span:nth-of-type(2) img')
            /* 获取输入密码input */
        var input = document.querySelector('.center ul li:nth-child(2) input');
        console.log(input); /* 控制台中验证是否获取input 不影响效果 可以删掉 */
        console.log(eyes); /* 同上 */
        
        /*眼睛的变*/
        var flag = 1; /* flag标记眼睛状态  初始默认为1闭眼 不可见密码*/
        eyes.onclick = function() {
            if (flag == 0) {
                eyes.src = '../images/no-see.png';
                input.type = 'password';
                flag = 1;
            } else {
                eyes.src = '../images/see.png';
                input.type = 'text';
                flag = 0; /* 当第一次按下img后，flag设为0，使得下一次按动按钮时 能将图片地址转换成 no-see.png地址*/
            }

        }
    </script>
</body>
</html>

其他的样式可以自己写看看，主要是下面这几个部分：


/*首先在<style></style>里取消网页自带的‘密码是否可见’按钮*/

 <style>
        input::-ms-reveal {
            display: none;
        }
        /* 取消password的眼睛 */
 </style>
 
 
 /*body中输入密码框部分*/
 
 <body>
 		  <div class="center">
            <ul>
                <li>
                    <span><img src="../images/keyword.png"></span>
                    <input type="password" placeholder="密码">
                    <span><img src="../images/no-see.png"></span>
                    /*密码框后面的‘眼睛’*/
                </li>
            </ul>
        </div>
        
        
        /*script中实现眼睛随鼠标点击改变状态*/
        
        <scipt>
        /* 获取输入密码框后的‘眼睛’图片 括号内就是选择的img*/
        var eyes = document.querySelector('.center ul li:nth-child(2) span:nth-of-type(2) img')
        /*解释为：选择class为center中的ul 里的第二个li 
        里的第二个span里的img图片*/
        
        
        /* 获取输入密码input */
        var input = document.querySelector('.center ul li:nth-child(2) input');
        
        console.log(input); /* 控制台中验证是否获取input 
        					不影响效果 可以删掉 */
        console.log(eyes); /* 同上 */
        
        /*眼睛的变换实际上是span标签中img图片的scr链接变化成
        另一个img图片的链接  相当于换了一个图片*/
        
        var flag = 1; /* flag标记眼睛状态  初始默认为1闭眼 不可见密码*/
        /*当点击eyes时*/
        eyes.onclick = function() {
            if (flag == 0) {
                eyes.src = '../images/no-see.png';/* 切换成'看不见'img */
                input.type = 'password';/* type为'password'的
                						   input标签默认看不到输入的字 */
                flag = 1;
            } else {
                eyes.src = '../images/see.png';
                input.type = 'text';/* type为'text'为可见输入的字*/
                flag = 0; /* 当第一次按下img后，flag设为0，
                使得下一次按动按钮时 能将图片地址转换成no-see.png图片的地址*/
            }

        }
        </script>
 </body>

以上，写的有点乱，希望能帮到和我一样初学js的同学。

ZYGO i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript-81.11-仿京东显示密码
hzh2647650746的博客
04-27 1081
<!DOCTYPE html> <html lang="en"> <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"> </ti...
前端学习（826）：仿京东显示隐藏显示明文密码案例下
歌谣的博客
04-12 339
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
京东显示密码
车明强的博客
10-29 166
思路： 点击眼睛按钮，把密码框类型改为文本框就可以看到里面的密码 一个按钮两个状态,点击一次，切换为文本框，继续点击一次切换为密码框 算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1 代码显示： 效果展示： ...
留言
web
09-02 126
留言代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
前端显示隐藏密码案例
weixin_46002223的博客
08-23 1144
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { .
HTML5+CSS3前端小案例——移动端购物支付页面
08-18
黑马的案例，跟着视频学完后做的。 在练习HTML和CSS的同学们可以拿去参考，做个小案例练练手。 内容涉及flex布局、公共样式公共类的挑选、多个大盒子与多个小盒子的嵌套（div>li>span、p>span等）、多行内容的排版...
JavaWeb综合案例——品牌后台管理系统
08-12
最新版JavaWeb综合案例——品牌后台管理系统 来源：改编自黑马程序员最新JavaWeb课程案例 所用技术及工具：Mybatis+Maven+Filter+Ajax+JSON+JavaScript+HTML+CSS+Element+VUE
黑马程序员——Android移动开发源码
04-29
黑马程序员——Android移动开发源码
黑马前端面经1
08-03
【前端基础概念】 1. MVVM 和 MVC 模型： - MVC (Model-View-Controller) 是一种软件设计模式，用于分离业务逻辑、用户界面和应用程序控制。模型处理数据，视图负责显示，而控制器处理用户输入并协调模型和视图。 ...
黑马前端学习JS高级md
11-15
【标题】：“黑马前端学习JS高级md” 【描述】：“黑马JS高级md复习资料” 【标签】：“JS高级”、“JS”、“黑马JS高级” 在前端开发领域，JavaScript（JS）是不可或缺的一部分，特别是在现代Web应用程序中。...
12-仿京东显示隐藏密码.html
11-13
12-仿京东显示隐藏密码.html
在html前端页面中密码输入框，输入一个字符显示明文，过一秒后再变*号的效果如何用js实现
12-10
在html前端页面中密码输入框，输入一个字符显示明文，过一秒后再变*号的效果如何用js实现
JS实现密码框的显示密码和隐藏密码简单功能
weixin_45090657的博客
12-07 6663
1.准备素材 打开网页：https://www.iconfont.cn/ 阿里巴巴矢量库 找到两个素材，下载即可 2.代码部分 <style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 37
隐藏显示密码，很简单，拿了就能用
m0_72190449的博客
01-04 605
隐藏显示密码，很简单，拿了就能用，js实现
JavaScript 仿京东显示隐藏密码
qq_49900295的博客
03-04 1543
我们想要仿照京东登陆页面做一个密码框： 这个密码框部分右侧有一个闭着的小眼睛，此时默认密码框输入的密码是看不见的 当我们单击这个闭着眼睛的小图标时，图标变成了睁着的眼睛，并且输入的密码也可见了，如下所示： 那么下面附上这个小案例的代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
js-仿京东显示隐藏密码
qq_41670147的博客
11-21 1100
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js 学习进阶（Dom部分 pink老师教学笔记）
shenruiaaa的博客
03-02 2311
DOM DOM是处理HTML或者XML的标准接口 在前面的js中，<script></script>标签是现在head里的，但是这里的DOM，得先有标签，所以<script></script>写在<body>里 获取元素 通过ID获取 document.getElementById() document.getElementById(‘time’) 返回的是一个元素对象 通过标签名获取 document.getElementsByTagNam.
JS前端点击记住密码之后再次登录时显示账号密码
qq_33007465的博客
03-10 2383
一、前端html代码 <div> <label> <h3>账号</h3> <input type="text" name="loginName" id="loginName" value="${username}" placeholder="请输入账号"><
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 1004
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
黑马程序员tb——brand
07-27
- *1* [【JAVAWEB开发】黑马程序员java web案例资料（含Element的删除与修改）](https://blog.csdn.net/aasd23/article/details/126940147)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值