登录页面的密码的显示与隐藏

电玩女神 2023-10-03 00:47 9阅读 0赞

## 原理就是点击的时候把密码的输入框的类型从password切换到text,再次点击把text切换成password,懒的话可以直接声明按钮点击,美观点的话可以去阿里icon官网上选几个使用 ##

## 效果 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Jyc5qGD5am35am36YWx_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Jyc5qGD5am35am36YWx_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
选择喜欢的icon以png的形式下载到本地放在项目中引用即可

> 丰富的icon资源:https://www.iconfont.cn/

![在这里插入图片描述][b6272e7ea43240a98f728ff8012512c0.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Jyc5qGD5am35am36YWx_size_20_color_FFFFFF_t_70_g_se_x_16 2]

## 代码 ##

<%--
      Created by IntelliJ IDEA.
      User: wx_weiyihe
      Date: 2021/8/30
      Time: 14:00
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <html>
    <head>
        <title>Title</title>
    </head>
    
    <style>
        *{
        
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
        
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .kuang{
        
            position: relative;
            width: 380px;
            height: 60px;
            border-radius: 5px;
            /*  background-color: rgba(204, 197, 197,.5); */
            box-shadow: inset 5px 5px 10px rgba(204, 197, 197,.5),
            inset -5px -5px 8px rgba(204, 197, 197,.5);
        }
        .kuang input{
        
            position: absolute;
            top: 0;
            left: 20px;
            height: 100%;
            width: 300px;
            font-size: 18px;
            outline: none;
            border: none;
            background-color:transparent;
        }
        .kuang input::placeholder{
        
            color: rgba(68, 67, 67,.8);
        }
        .conceal{
        
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            background-image: url(../image/open.png);
            background-size: 100% 100%;
            cursor: pointer;
        }
        .conceal.yincang{
        
            background-image: url(../image/close.png);
            background-size: 100% 100%;
        }
    </style>
    
    <body>
    <div class="kuang">
        <input type="password" placeholder=" 请输入密码......" id='password' >
        <div class="conceal" id='conceal'></div>
    </div>
    <script>
        var password = document.getElementById('password');
        var anniu = document.getElementById('conceal');
        anniu.addEventListener('click',function(){
        
            if(password.type==='password')
            {
        
                password.setAttribute('type','text');
                anniu.classList.add('yincang');
            }else{
        
                password.setAttribute('type','password');
                anniu.classList.remove('yincang');
            }
        })
    </script>
    </body>
    
    
    
    </html>

## icon路径 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Jyc5qGD5am35am36YWx_size_17_color_FFFFFF_t_70_g_se_x_16]

引用

background-image: url(../image/open.png);

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Jyc5qGD5am35am36YWx_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/95427ae2cfd34b4e8febc8174c2bb666.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Jyc5qGD5am35am36YWx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Jyc5qGD5am35am36YWx_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/b1fc22e143244e6d95648e6d71fcc778.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Jyc5qGD5am35am36YWx,size_20,color_FFFFFF,t_70,g_se,x_16
[b6272e7ea43240a98f728ff8012512c0.png]: https://img-blog.csdnimg.cn/b6272e7ea43240a98f728ff8012512c0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Jyc5qGD5am35am36YWx_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/d6088a8f28c64cdb934af4dabc320a99.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Jyc5qGD5am35am36YWx,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Jyc5qGD5am35am36YWx_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9c69fe0aa1f547f4a8267ea20129bab5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Jyc5qGD5am35am36YWx,size_17,color_FFFFFF,t_70,g_se,x_16