EmailLogin-编程实验室

EmailLogin.html

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>邮箱登录</title> <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />--> <meta name="viewport" content="initial-scale=1.0, width=device-width"> <link rel="stylesheet" type="text/css" href="../css/login.css" /> <link href="../images/bitnami_favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"> <!--<link rel="preload" href="../Font/simkai.ttf" as="font" crossorigin="anonymous">--> <link rel="preload" href="../Font/AaBanRuoKaiShu-2.ttf" as="font" type="font/ttf" crossorigin> <script type="text/javascript" src="../js/utility.js" charset="utf-8"></script> <script type="text/javascript" src="../js/Algorithm/sha1.js" charset="utf-8"></script> <script type="text/javascript" src="../js/login.js" charset="utf-8"></script> <script type="text/javascript" src="../js/email_valicode.js" charset="utf-8"></script> <script src="../js/loadFont.js"></script> </head> <body> <div id="container"> <div id="ng"> <h3 id="ng-h">邮箱登录</h3> <app-avater-heder id="ng-pic"><img id="pic" alt="" src="../images/sign-in-avatar.svg" /></app-avater-heder> </div> <div id="mainfun"> <form id="bg" onsubmit="subcontrol()" target="submitaccount"> <div id="txtdiv1"> <input id="emalname" name="email" type="email" class="txt" autocomplete="on" placeholder="邮箱" onblur="CheckEmailForValicode()" onfocus="CheckEmailForValicode()" tabindex="1"/> </div> <div id="txtdiv2"> <input id="lgpswd" type="password" class="txt" maxlength="4" autocomplete="off" placeholder="验证码" tabindex="2"> <div class="send_btn"><a id="a_send_btn" href="javascript:sendvalicode(max_wait)" class="send_btn_link">获取验证码</a></div> </div> <div id="lgdiv"> <button id="lgbtn" type="button" onclick="loginsubmit()" onkeyup="loginsubmit()">登录/注册</button> <iframe title="back" name="submitaccount" style="display: none;"></iframe> </div> <div id="hint">&nbsp;</div> </form> </div> </div> <footer id="_footer" > <a target="_self" href="../">自转首页</a>&nbsp;&nbsp; <a target="_blank" href="../">新开首页</a> </footer> </body> </html>

// JavaScript Document // window.onload = function(){ if(localStorage.getItem('href_beforelogin')==null) { localStorage.setItem('href_beforelogin','../webpage/Home.html.php'); } sessionStorage.setItem('subCtrl',true); //聚焦，只有聚焦了select()才有效。 $('emalname').focus(); //设置按钮的快捷键 $('emalname').accessKey=13; //回车键的键值 $('lgpswd').accessKey=13; //回车键的键值 //form的tableindex $('emalname').tabIndex=1; $('lgpswd').tabIndex=2; $('lgbtn').tabIndex=3; //邮箱名输入框回车按钮事件 $('emalname').onkeydown = function () { if (event.keyCode == 13) { event.preventDefault(); $('lgpswd').select(); } } //验证码框回车按钮事件 $('lgpswd').onkeydown = function () { if (event.keyCode == 13) { event.preventDefault(); loginsubmit(); } } } function subcontrol() { return (sessionStorage.getItem('subCtrl')==true)?true:false; } var lgwait=3; var id_interval=0; function loginsubmit() { $('hint').innerText=""; if($('emalname').value==null || $('emalname').value==''){ $('hint').innerText="用户名为空！"; sessionStorage.setItem('subCtrl',false); } else sessionStorage.setItem('subCtrl',true); if($('lgpswd').value==null || $('lgpswd').value=='') { $('hint').innerText+="密码为空！"; sessionStorage.setItem('subCtrl',false); } else { sessionStorage.setItem('subCtrl',true); } if(sessionStorage.getItem('subCtrl')=='true') { try { var hintmsg=new XMLHttpRequest(); var user_name=$('emalname').value; var user_pswd = hex_sha1($('lgpswd').value);//引用sha1.js localStorage.setItem('useremail',user_name); var account=new Object(); account={"user_name":user_name, "user_pswd":user_pswd}; var accountmsg=JSON.stringify(account); var responseMsg; if (hintmsg!=null) { hintmsg.open("POST","../php/backwork/login_chk.php",true); hintmsg.setRequestHeader("Content-Type", "application/json;charset=utf-8"); hintmsg.send(accountmsg); hintmsg.onreadystatechange = function () { if(hintmsg.readyState==4 && this.status==200) { responseMsg=''; if(hintmsg.responseText!=''){ responseMsg=JSON.parse(hintmsg.responseText); sessionStorage.setItem('transportbuf',hintmsg.responseText); } //console.log(responseMsg); if(responseMsg.info!='' || responseMsg.info==null) $('hint').innerText+=responseMsg.info; else $('hint').innerText+='no message'; if(responseMsg.code==1302 || responseMsg.code==1103){ localStorage.setItem("login_info",JSON.stringify(responseMsg.data)); //判断后再处理 $('hint').innerText=responseMsg.info+lgwait+"秒后跳转。"; id_interval=setInterval(selfgoto,1000,localStorage.getItem("href_beforelogin")); } } } } } catch(e) { console.log(e); } } } function selfgoto(url) { --lgwait; $('hint').innerText=lgwait+"秒后跳转。" if(lgwait<=0) { clearInterval(id_interval); if(url==''||url==null) self.location='../webpage/Home.html.php'; else self.location=url; } //console.log(lgwait); //console.log("id:",id_interval); }

logout.js

// JavaScript Document function logout() { if(JSON.parse(localStorage.getItem("login_info"))!=null) { localStorage.removeItem("login_info"); } if(localStorage.getItem(href_beforelogin)!='') { self.location=localStorage.getItem(href_beforelogin); } } function loginshow() { if(JSON.parse(localStorage.getItem("login_info"))!=null) { let now=Math.floor(new Date().getTime()/1000); let expireon=JSON.parse(localStorage.getItem("login_info")).expireon; //console.log(expireon,now); if(now < expireon) { //show document.getElementById("logincontent").style.display="contents"; } //定时隐藏 setTimeout(function(){ document.getElementById("logincontent").style.display="none"; },(expireon-now)*1000); } else { //hidden document.getElementById("logincontent").style.display="none"; } }

email_valicode.js

// JavaScript Document function logout() { if(JSON.parse(localStorage.getItem("login_info"))!=null) { localStorage.removeItem("login_info"); } if(localStorage.getItem(href_beforelogin)!='') { self.location=localStorage.getItem(href_beforelogin); } } function loginshow() { if(JSON.parse(localStorage.getItem("login_info"))!=null) { let now=Math.floor(new Date().getTime()/1000); let expireon=JSON.parse(localStorage.getItem("login_info")).expireon; //console.log(expireon,now); if(now < expireon) { //show document.getElementById("logincontent").style.display="contents"; } //定时隐藏 setTimeout(function(){ document.getElementById("logincontent").style.display="none"; },(expireon-now)*1000); } else { //hidden document.getElementById("logincontent").style.display="none"; } }