用JavaScript实现京东登录页面的用户密码显示或者隐藏功能

用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用到的是睁眼和闭眼的图片,我这里就敷衍一下,实现这个功能就达成目的了。


作者才开始写文章,也开开始接触前端啊!

别喷我,写的不好就劳烦指点一二,觉得有帮助就留下个大拇指点个关注再走哈哈哈!

你可能感兴趣的:(JS,javascript,css,html)