js實(shí)現(xiàn)簡(jiǎn)單登錄功能的實(shí)例代碼
更新時(shí)間：2013年11月09日 15:25:19 作者：
js驗(yàn)證用戶身份，登錄成功之后等待一定秒數(shù)，跳轉(zhuǎn)到操作頁(yè)面。使用window函數(shù)。代碼如下
復(fù)制代碼 代碼如下:
<!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>
這是登錄頁(yè)面，只有當(dāng)用戶名為lala，密碼為123時(shí)登錄成功。在onclick事件處使用return,是在用戶名和密碼輸入不符時(shí)，阻止頁(yè)面跳轉(zhuǎn)。登錄成功頁(yè)面中，含有等待秒數(shù)，代碼為:
復(fù)制代碼 代碼如下:
<!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>秒后自動(dòng)跳轉(zhuǎn)到管理頁(yè)面
</body>
</html>
關(guān)鍵在幾個(gè)函數(shù)的使用，setTimeout("tiao()",5000);函數(shù)是打開(kāi)頁(yè)面，等待5秒，調(diào)用tiao()函數(shù)。setInterval("changeSec()",1000);函數(shù)是每隔1秒調(diào)用一次changeSec()函數(shù)。這樣就完成了簡(jiǎn)單的登錄功能。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于es6中reduce的基本使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
非主流的textarea自增長(zhǎng)實(shí)現(xiàn)js代碼
今天稍微研究了下textarea隨輸入內(nèi)容自動(dòng)增長(zhǎng)的功能，通過(guò)google參考了一些實(shí)現(xiàn)方式2011-12-12
Ajax局部更新導(dǎo)致JS事件重復(fù)觸發(fā)問(wèn)題的解決方法
如果頁(yè)面中包含一個(gè)ajax更新的列表，那么需要小心非動(dòng)態(tài)更新部分的事件處理，下面以帶有公共工具欄的列表界面為例2014-10-10
HTML+JavaScript實(shí)現(xiàn)掃雷小游戲
這篇文章主要為大家詳細(xì)介紹了HTML+JavaScript實(shí)現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
js實(shí)現(xiàn)二級(jí)導(dǎo)航功能
本文主要介紹了js實(shí)現(xiàn)二級(jí)導(dǎo)航功能的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
javascript正則表達(dá)式使用replace()替換手機(jī)號(hào)的方法
這篇文章主要介紹了javascript正則表達(dá)式使用replace()替換手機(jī)號(hào)的方法,可實(shí)現(xiàn)把手機(jī)號(hào)第4位到第7位替換成****的功能,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了詳解微信小程序圖片地扯轉(zhuǎn)base64解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
javascript轉(zhuǎn)換字符串為dom對(duì)象（字符串動(dòng)態(tài)創(chuàng)建dom）
那么今天的目的就是教大家怎么去實(shí)現(xiàn)一個(gè)這樣的方法用來(lái)把字符串直接轉(zhuǎn)換為標(biāo)準(zhǔn)的dom對(duì)象2010-05-05
JavaScript反轉(zhuǎn)數(shù)組常用的4種方法
這篇文章主要給大家介紹了關(guān)于JavaScript反轉(zhuǎn)數(shù)組常用的4種方法,反轉(zhuǎn)數(shù)組可以將數(shù)組中的元素順序顛倒過(guò)來(lái),從而達(dá)到一些特定的需求,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
一個(gè)比較特殊的客戶要求，在一個(gè)頁(yè)面用表格顯示數(shù)據(jù)，數(shù)據(jù)量不是很多，不希望使用瀏覽器的滾動(dòng)條，只能在Div中滾動(dòng)table中的數(shù)據(jù)，但是有個(gè)特殊的要求，就是必須將滾動(dòng)條自動(dòng)滾動(dòng)到底部2012-03-03