javascript实现密码显示和隐藏

<!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 @ 2022-04-29 14:25  不忘初心2021  阅读(73)  评论(0编辑  收藏  举报