用JavaScript实现京东登录页面的用户密码显示或者隐藏功能
昨天跟着老师学js的Dom和Bom阶段时讲到了这个经典案例，后来才想起来分享正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教！
这里我用到的是本地的图片
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input{
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img{
width: 24px;
position: absolute;
top: 2px;
right: 2px;
}
</style>
</head>
<body>
<div class="box">
<label>
<img src="../99_images/1.png" alt=""id="eye">
</label>
<input type="password"id="pass">
</div>
<script>
var img=document.getElementById('eye')
var LoginPassword=document.getElementById('pass')
var flag=0
eye.onclick=function () {
if (flag == 0) {
LoginPassword.type = 'text'
img.src = '../99_images/1.png'
flag = 1
} else {
LoginPassword.type = 'password'
flag = 0
img.src ='../99_images/2.png'
}
}
</script>
</body>
</html>
2.用chrome浏览器进行演示
input类型为password时显示效果
点击图片过后这里input类型变为text，图片也相应地发生变化
代码解释
主要的算法就是定义了一个flag变量，通过点击图片实现函数的循环，从而使flag的值发生变化，让flag在0，1之间变化，这样就可以重复点击
这里div盒子是img元素的父类，要定位img的位置我们用css样式对其进行设置，这里用到了子绝父相，将用于点击的图片放在了输入框的右侧。
父级元素div则设置了个margin：100px auto，让其水平居中然后距离顶部100像素的距离,为了让其更方便看到。
然后输入密码过后点击图片即可以隐藏/显示密码，相应的图片也会发生变化，JD用到的是睁眼和闭眼的图片，我这里就敷衍一下，实现这个功能就达成目的了。
作者才开始写文章，也开开始接触前端啊！
别喷我，写的不好就劳烦指点一二，觉得有帮助就留下个大拇指点个关注再走哈哈哈！