点击电脑图标，显示电脑界面。点击相同的二维码图标，显示二维码界面(七)

更新时间：2022-07-18 10:48:41

有时候，在一个地方，放置不同的图标，可以随时切换图标。在切换图标的时候，实际上会相应切换底下的不同的界面。

一前端基本表单界面

生成二维码，引入了qrcode.js库

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面 | Corswork Software</title>

<!--Bootstrap Stylesheet [ REQUIRED ]-->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="plugins/bootstrap/css/bootstrap-theme.min.css"
    rel="stylesheet">

<link href="plugins/animate-css/animate.min.css" rel="stylesheet">
<link href="plugins/font-awesome/css/font-awesome.min.css"
    rel="stylesheet">
<link rel="shortcut icon" href="img/wkapp.png">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-sm-offset-8" style="margin-top: 100px;padding-right:0;">
                <form class="form-horizontal" id="loginForm">
                    <div class="loginmode">
                        <!-- 显示第一个图标 -->
                        <a id="ewm"  href="#" >
                            <img width="26px" height="26px" alt="" src="img/login/ewm.png">
                        </a>
                        <!-- 显示第二个图标 -->
                        <a id="up" style="display: none;" href="#">
                            <img width="26px" height="26px" alt="" src="img/login/up.png"> 
                        </a>
                    </div>
                        <!-- 第一个界面 -->
                        <div class="" id="upTab">
                            <div class="form-group">
                                <input type="text" class="form-control" id="userName"
                                    placeholder="用户名" name="userName"> <i class="fa fa-user"></i>
                            </div>
                            <div class="form-group help">
                                <input type="password" class="form-control" id="userPW"
                                    placeholder="密　码" name="userPW"> <i class="fa fa-lock"></i>
                                    <!-- 忘记密码是这样显示的. 有一个data-toggle -->
                                     <a
                                    title="忘记密码" id="forgetBtn" href="#"
                                    class="fa fa-question-circle" data-toggle="tooltip"></a>
                            </div>
                            <div class="form-group">
                                <div class="main-checkbox">
                                    <input type="checkbox" value="None" id="remember" name="check"
                                        checked="checked" /> <label for="remember"></label>
                                </div>
                                <label class="text" for="remember">记住我</label>
                                <button type="button" class="btn btn-default" id="login">登录</button>
                            </div>
                        </div>
                        <!-- 第二个界面 -->
                        <!-- 点击二维码时显示这一个 -->
                        <div class="" style="display: none;" id="ermTab">
                            <div class="form-group">
                                <div class="row" style="padding-left:10px;">
                                    <!-- <img
                                        class="mar-ver col-sm-5 col-sm-offset-2 img-lg img-thumbnail img-rounded img-responsive"
                                        src="img/app.png" style="width: 200px; height: 200px;" /> -->
                                    <div id="qrcode_container" ></div>
                                    <img id="img-buffer" src="img/logo.png" style="display:none"/>
                                </div>
                                <span class="text-login">打开手机APP，扫一扫登录</span>
                            </div>

                        </div>
                <!--    </div> -->
                </form>
            </div>
        </div>
    </div>
    <script src="plugins/jquery/jquery-2.1.1.min.js"></script>
    <script src="plugins/jquery/jquery.cookie.js"></script>
    <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="plugins/qrcode/jquery-qrcode-0.14.0.min.js"></script>
    <script src="login.js"></script>
</body>
</html>

二初始化页面

/**二维码登录和用户密码登录切换**/
$("#up").hide();
$("#ewm").show();
$("#ermTab").hide();
$("#upTab").show();

三点击二维码按钮时，切换到二维码界面

var time=null;//定时任务
$("#ewm").on('click',function(){
    $("#ewm").hide();
    $("#up").show();
    $("#upTab").hide();
    $("#ermTab").show();
    setQrcode();
})
//生成二维码操作
function setQrcode(){
        //生成登录二维码
        var keyid ='不同的唯一uuid'
        var curWwwPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        var localhostPaht = curWwwPath.substring(0, pos);
        var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        var text = localhostPaht + projectName+"?keyid="+keyid;
        var options = {
                render:"canvas",
                ecLevel:"H",
                minVersion:6,
                fill:"#333333",
                background:"#ffffff",
                text:text,
                size:200,
                radius:0,
                quiet:1,
                mode:4,
                mSize:0.11,
                mPosX:0.5,
                mPosY:0.5,
                image: $('#img-buffer')[0]
        };
        $('#qrcode_container').empty().qrcode(options); 
        //发起登录申请
       // time=setInterval("sendLogo()",1000);
}

四点击电脑图标时，切换到电脑图标

$("#up").on('click',function(){
    $("#up").hide();
    $("#ewm").show();
    $("#ermTab").hide();
    $("#upTab").show();
    clearInterval(time);//关闭定时任务
})

五重启服务器，进行相关验证

点击电脑图标，显示电脑界面。点击相同的二维码图标，显示二维码界面(七)

点击二维码时:

正常显示相应的二维码信息。

上一篇 : ：IIS Web服务器的Web Farm NLB群集下一篇 : 基础：tar 命令使用介绍

点击电脑图标，显示电脑界面。点击相同的二维码图标，显示二维码界面(七)

一前端基本表单界面

二初始化页面

三点击二维码按钮时，切换到二维码界面

四点击电脑图标时，切换到电脑图标

五重启服务器，进行相关验证

相关阅读

推荐文章

点击电脑图标，显示电脑界面。点击相同的二维码图标，显示二维码界面(七)

一 前端基本表单界面

二 初始化页面

三 点击二维码按钮时，切换到二维码界面

四 点击电脑图标时，切换到电脑图标

五 重启服务器，进行相关验证

相关阅读

推荐文章

一前端基本表单界面

二初始化页面

三点击二维码按钮时，切换到二维码界面

四点击电脑图标时，切换到电脑图标

五重启服务器，进行相关验证