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

代码如下:

<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>
效果图

密码登录
在这里插入图片描述
二维码登录
bootstrap登录界面切换密码登录和二维码登录

代码如下:

效果图

猜你喜欢
