代碼掃碼登錄是現在很流行的一種登錄方式,它可以讓用戶更加便捷快速地登陸網站。下面我們就來看看html怎么實現代碼掃碼登錄。
<div id="login"> <div id="qrcode"></div> <div id="loginForm"> <form action="" method="post"> <input type="text" placeholder="請輸入用戶名或郵箱" /> <input type="password" placeholder="請輸入密碼" /> <input type="submit" value="登錄" /> </form> </div> </div> <script> var qrcode = new QRCode(document.getElementById("qrcode"), { width : 200, height : 200 }); function makeQRCode(text) { qrcode.makeCode(text); } makeQRCode("http://example.com/login.html"); setInterval(function() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var response = JSON.parse(xhr.responseText); if (response.status == "succeeded") { alert("登錄成功"); } } }; xhr.open("GET", "http://example.com/qrcode/login_status.json", true); xhr.send(); }, 1000); </script>
首先,在html中我們需要建立一個id為login的大框架,其中包含兩個id為qrcode和loginForm的子框架。qrcode框架就是用來存放二維碼的,而loginForm框架就是用來存放表單,讓用戶在掃碼登錄失敗的時候可以通過表單手動登錄。
然后,在