JS實(shí)現(xiàn)顯示登錄時(shí)間

2012/11/5 19:16:45作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

用戶登錄到網(wǎng)站時(shí)，有一個(gè)文本框一直顯示用戶的停留時(shí)間。顯示時(shí)問(wèn)是隨著當(dāng)前的時(shí)間不斷變化的。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂（yzddtk.cn）</title>
</head>
<body>
<form name=forms> <font size=3>
<CENTER><div align=center><p></font>
<font color=red size=3>
您在本頁(yè)停留了</font>
<font color=#80FF80><br>
 <input type=text name=input1 size=10>
</font></p></div></center></font>
<SCRIPT language=javascript>
var sec=0;var min=0;var hou=0;flag=0;
window.setTimeout("update();",1000); 
 //每隔1秒更新下時(shí)間
function update() 
//實(shí)現(xiàn)更新的主要方法
{
    sec++; 
 //秒數(shù)自增
    if(sec==60){
    sec=0;min+=1; 
//如果秒數(shù)超過(guò)60,分?jǐn)?shù)就自增
    }
    if(min==60){ 
//如果分?jǐn)?shù)超過(guò)60,小時(shí)數(shù)就自增
    min=0;hou+=1;
    }
    if((min>0)&&(flag==0))
    {
        window.alert("您停留了1分鐘,歡迎再來(lái)!");
        flag=1;
    }
    document.forms.input1.value=hou+"時(shí)"
+min+"分"+sec+"秒";//在文本框中輸出時(shí)間
    window.setTimeout("update();",1000);
//定時(shí)更新時(shí)間-每隔一秒更新一次
}
</SCRIPT>
</form>
</body>
</html>

【運(yùn)行效果】

顯示登錄時(shí)間運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)其實(shí)是“setTimeout“計(jì)時(shí)器。為了實(shí)現(xiàn)時(shí)間不斷變化，必須使用“setTimeout”不斷調(diào)用“update”方法。將定時(shí)時(shí)間設(shè)置為“1000”會(huì)每一秒更新一次顯示的文本。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：顯示登錄時(shí)間進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS實(shí)現(xiàn) 時(shí)間