javascript实现密码显示和隐藏

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!Doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>[[#{text.suffix}]]</title>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}" ></script>
    <link rel="stylesheet" th:href="@{/css/amazeui.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/app.css}"/>
    <style type="text/css">
       .status{
                width: 200px;
                height: 20px;
                color: #FFFF00;
                font-size:15px;
            }
        #addressTitle{
            font-size: 5px;
        }
    </style>
</head>
<body>
 
<div class="log">
 
    <div class="am-g">
 
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-8 am-u-sm-centered log-content">
            <h1 class="log-title am-animation-slide-top">
                不忘初心
                <p id="status"  class="status"></p>
                
             </h1>
            <span id="time"></span>
            <br>
            <form class="am-form" id="loginForm">
 
                <div class="am-input-group am-radius am-animation-slide-left">
                    <input type="text" id="user" class="am-radius" autocomplete="off"  placeholder="请输入用户名"/>
                    <span class="am-input-group-label log-icon am-radius"><i
                            class="am-icon-user am-icon-sm am-icon-fw"></i>用户名</span>
                </div>
                <br>
                <div class="am-input-group am-animation-slide-left log-animation-delay">
                    <input  class="am-form-field am-radius log-input" id="pwd" placeholder="请输入密码"  type="password"/>
                    <span class="am-input-group-label log-icon am-radius"><i
                            class="am-icon-lock am-icon-sm am-icon-fw">
                    </i>
                          <input type="button" class="btn btn-default" id="btn" value="显示" onclick="change()">
                    </span>
                </div>
                
                <label><input id="remember" type="checkbox">记住密码</label><br>
 
                <button type="button"
                        class="am-btn am-btn-primary am-btn-block am-btn-lg am-radius am-animation-slide-bottom log-animation-delay"
                 onclick="checkForm()">
                    登 录
                </button>
                <a href="/toRe">注册</a>
                  
                <a href="/user/toResetPwd">忘记密码?</a>
 
            </form>
             
        </div>
    </div>
 
</div>
<script type="text/javascript">
    let btn=document.getElementById("btn");
    let pwd=document.getElementById("pwd");
    function change(){
 
        if (btn.value=='显示'){
            pwd.type="text";
            btn.value="隐藏";
        }else {
            pwd.type="password";
            btn.value="显示";
        }
    }  
   
</script>
</body>
</html>

　　

posted @   不忘初心2021  阅读(84)  评论(0)  编辑  收藏  举报
相关博文：
·  设置Thymeleaf页面复选框显示勾选效果
·  @FeignClient中configuration属性的简单介绍
·  前端记住密码功能实现(cookie)
·  JavaScript
·  显示隐藏密码框
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示
SQL AI 助手