bootstrap登录界面切换密码登录和二维码登录

青旅半醒 2022-03-29 08:57 381阅读 0赞

##### 代码如下: #####

<html xmlns:th="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
        <title>用户登录</title>
        <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1545041465480" media="all">
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
        <script type="text/javascript" src="static/js/jquery.qrcode.js"></script>
        <script type="text/javascript" src="static/js/qrcode.js"></script>
    </head>
    <body>
    <div >
    </div>
    <div class="page-header">
        <h1 class="text-center">登录中心</h1>
    </div>
    <div class="loginContent maincontainer container" style="width: 25%; margin: auto;">
        <div   id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="userLogin">
                <div  class="form-group">
                    <label>账号</label>
                    <input name="username" class="form-control" id="username" placeholder="请输入您的账号">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input name="password" type="password" class="form-control" id="password" placeholder="请输入您的密码">
                </div>
                <div class="submit">
                    <button onclick="login()" class="btn btn-primary btn-lg btn-block">登录</button>
                </div>
            </div>
    
            <div class="tab-pane fade" id="qrCodeLogin">
                <div class="form-group" style=" width: 100%;height: 250px;">
                    <div style=" height: auto; width:65%"   class="img-rounded img-responsive center-block" id="qrcode"></div>
                </div>
            </div>
        </div>
        <div style="height: 40px; ">
            <a onclick="setChangeLogin(this)" id="login_type" style="text-decoration: none;line-height: 40px;float: right"  data-toggle="tab">二维码登录</a>
        </div>
    </div>
    </body>
    <script th:inline="javascript" type="text/javascript">
        jQuery('#qrcode').qrcode({ 
            render	: "table",
            text	: "http://www.baidu.com"
        });
    
        function setChangeLogin(obj){ 
            var text = $(obj).text();
            if(text=='二维码登录'){ 
                $('#login_type').attr('href','#qrCodeLogin');
                $(obj).text('密码登录');
            }else { 
                $('#login_type').attr('href','#userLogin');
                $(obj).text('二维码登录');
            }
        }
    
    
       function login() { 
           var username=$('#username').val();
           var password=$('#password').val();
           if(username==""){ 
               parent.layer.msg("请填写您的用户名");
               $("#username").focus();
           }else if(password==""){ 
               parent.layer.msg("请填写您的密码");
               $("#password").focus();
           }else { 
               var url = [[${ backUrl}]];
               parent.layer.load(1);
               $.ajax({ 
                   url: "/login",
                   type: 'POST',
                   data: { 
                       username: username,
                       password: password
                   },
                   dataType: 'json',
                   success: function (json) { 
                       parent.layer.closeAll();
                       if (json.errCode == 0) { 
                           layer.alert('登录成功');
                       } else { 
                           layer.alert(json.errMsg);
                       }
                   }
               });
           }
       }
    </script>
    
    </html>

##### 效果图 #####

密码登录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]  
二维码登录  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]: /images/20220329/995748a3eeb349179b7eac705e7152f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70 1]: /images/20220329/e2c954098c3f4965af400621cabcf195.png