複製代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Login.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> function checkuser() { if($('uname' == "lala") && $('pwd') == "123") { return true; }else { return false; } } function $(id) { return document.getElementById(id).value; } </script> </head> <body> <form action="ok.html"> u:<input type="text" id="uname"/><br> p:<input type="password" id="pwd"/><br> <input type="submit" value="登入" onclick="return checkuser()"/> </form> </body></html>
這是登入頁面，只有當使用者名稱為lala，密碼為123時登入成功。在onclick事件處使用return,是在使用者名稱和密碼輸入不符時，阻止頁面跳轉。登入成功頁面中，含有等待秒數，代碼為:
複製代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ok.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> function tiao() { clearInterval(mytime); window.open("manage.html","_self"); } setTimeout("tiao()",5000); function changeSec() { //得到myspan值 $('myspan').innerText=$('myspan').innerText-1; } function $(id) { return document.getElementById(id); } var mytime = setInterval("changeSec()",1000); </script> </head> <body> 登入成功，<span id="myspan">5</span>秒後自動跳轉到管理頁面 </body></html>
關鍵在幾個函數的使用，setTimeout("tiao()",5000);函數是開啟頁面，等待5秒，調用tiao()函數。setInterval("changeSec()",1000);函數是每隔1秒調用一次changeSec()函數。這樣就完成了簡單的登入功能。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
