京东显示隐藏密码"/>
JavaScript 仿京东显示隐藏密码
我们想要仿照京东登陆页面做一个密码框：
这个密码框部分右侧有一个闭着的小眼睛，此时默认密码框输入的密码是看不见的
当我们单击这个闭着眼睛的小图标时，图标变成了睁着的眼睛，并且输入的密码也可见了，如下所示：
那么下面附上这个小案例的代码：
<!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.
更多推荐
JavaScript 仿京东显示隐藏密码
发布评论