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

这是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的同学。

黑马前端案例——模拟京东显示密码相关推荐

案例:模拟京东快递单号的查询效果
案例:模拟京东快递单号的查询效果要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容分析: 输入内容时,上面的大盒子会自动显示出来(这里字号更大) 表单检测用户输入,给表单添加键盘事件 ...
JS模拟京东搜索框案例模拟京东快递单号查询案例
模拟京东搜索框案例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
前端案例——1.仿京东显示隐藏密码明文案例。
  <!-- 一个按钮两个状态,点击一次,切 ...
仿京东显示隐藏密码明文案例（字体图标实现）
仿京东显示隐藏密码明文案例(字体图标实现) 眼睛使用的是 iconfont 阿里矢量图标库的内容链接:https://www.iconfont.cn/search/index?代码案例展示: 字体图 ...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
总结本人学习b站黑马前端课程，各部分案例汇总
目录 1.Ajax: 对应课程: b站黑马JavaScript的Ajax案例代码--新闻列表案例 b站黑马JavaScript的Ajax案例代码--评论列表案例 b站黑马JavaScript的Ajax ...
模拟京东快递单号查询案例2020/11/24
模拟京东快递单号查询案例快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大) 表单检测用户输入: 给表单添加键盘事件同时把快递单号里面的值(value)获取过来赋值给 con ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...

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

模拟京东显示密码

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

实现效果

以下是我的代码

黑马前端案例——模拟京东显示密码相关推荐

最新文章

热门文章