用户登录界面【密码明文转换】HTML+css+JavaScript

最新推荐文章于 2023-04-09 10:09:20 发布

辗小迟

最新推荐文章于 2023-04-09 10:09:20 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/Zhan_chi_/article/details/129769664

版权

实现：

HTML+css+JavaScript实现，在输入框输入密码，点击👀可以转换成明文，再次点击转换为不可见的密码形式。

利用JavaScript的 DOM 操作元素来改变元素里面的属性，实现密码框（密码不可见）和文本框（密码可见）的转换，以及睁眼闭眼图片的转换。

算法：利用flag变量，如果点击时flag值是1（说明当前是密码框）就切换为文本框，同时flag赋值为0；如果点击时flag值是0就切换为密码框，同时flag值赋值为1。跟操作系统的知识好像啊。。。我惊了。

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录-密码明文转换【dom操作元素】【lable】</title>
    <style>
        .box{
            position: relative;
            width: 200px;
            height: 25px;
            margin: 200px auto;
            border: black 1px solid;
        }
        .box img{
            position:absolute;
            right: 2px;
            top: 2px;
            width: 20px;
        }
        .box input{
            position: absolute;
            top: 2px;
            width: 160px;
            border: 0; 
            outline: none;
        }
        ::-ms-reveal{display: none;} 
        /* 清除input里面自带的眼睛👀 */
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="../../../close.jpg" alt="" id="eye">
        </label>
        <input type="password" id="psw" placeholder="请输入密码">

    </div>
    <script>
        // 1.获取元素对象
        var eye = document.getElementById('eye');
        var psw = document.getElementById('psw');
        // 2.注册事件，处理程序（事件类型 函数）
        var flag = 0; // 一定要在函数前面（外面），不然flag的值永远都是0，永远都无法进行else
        eye.onclick = function(){ // 是onlick
            if (flag == 0){
                psw.type = 'text' ; // 是写元素对象的名字！！不是写标签名!!
                eye.src = '../../../open.jpg'; // 已经获取到了eye对象，注意不要写img之类的
                flag = 1;
            }else {
                psw.type = 'password';
                eye.src = '../../../close.jpg';
                flag = 0;
            }
        }
        
    </script>
</body>
</html>

易错点：

见注释。

辗小迟

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用户登录界面【密码明文转换】HTML+css+JavaScript

在输入框输入密码，点击👀可以转换成明文，再次点击转换为不可见的密码形式。算法：利用flag变量，如果点击时flag值是1（说明当前是密码框）就切换为文本框，同时flag赋值为0；如果点击时flag值是0就切换为密码框，同时flag值赋值为1。利用JavaScript的 DOM 操作元素来改变元素里面的属性，实现密码框（密码不可见）和文本框（密码可见）的转换，以及睁眼闭眼图片的转换。
复制链接

扫一扫