利用js實現(xiàn)在瀏覽器狀態(tài)欄顯示訪問者在本頁停留的時間
更新時間：2013年12月29日 17:06:55 作者：
本文為大家介紹下利用JavaScript實現(xiàn)在瀏覽器狀態(tài)欄顯示停留時間即在狀態(tài)欄上顯示訪問者在本頁停留的時間
問題描述：在狀態(tài)欄上顯示 ，訪問者在本頁停留的 時間 （如：您在本頁停留了 （如：您在本頁停留了 X小時 X分 X秒）
該問題相當(dāng)于是設(shè)計一個計時器，用于顯示瀏覽者在該頁面停留了多長時間。要解決該問題，我想到的主要有兩種方法。
方法一：利用系統(tǒng)時間。即先設(shè)置一個變量，用于獲取登錄開始時間startTime,然后利用setTimeout()函數(shù)讓頁面不停的刷新，在刷新的同時，獲取當(dāng)前時間nowTime，然后用當(dāng)前時間減去登錄開始時間，即為停留時間。在此就不做詳細(xì)編寫。重點說下下面使用到的方法二來進(jìn)行實現(xiàn)。
方法二：設(shè)置三個變量：second,minute,hour。然后讓second不停的+1，并且利用setTimeout實現(xiàn)頁面每隔一秒刷新一次，當(dāng)second大于等于60時，minute開始+1，并且讓second重新置零。同理當(dāng)minute大于等于60時，hour開始+1。這樣即可實現(xiàn)計時功能。
方法二代碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
<body onload="timeCount()">
<script type="text/javascript">
var second=0;
var minute=0;
var hour=0;
function timeCount(){
second=second+1;
setTimeout("timeCount()",1000);
while(second>=60){
minute=minute+1;
second=0;
while(minute>=60){
hour=hour+1;
minute=0;
second=0;
}
}
window.status="你在本網(wǎng)頁停留了"+hour+"小時"+minute+"分"+second+"秒";
}
</script>
</body>
</html>
運行效果如圖所示。
相關(guān)文章
Canvas實現(xiàn)數(shù)字雨和放大鏡效果的代碼示例
這篇文章主要介紹了如何Canvas實現(xiàn)數(shù)字雨和放大鏡效果，文中有完整的代碼示例，文章通過代碼介紹的非常清楚，感興趣的小伙伴跟著小編一起來看看吧2023-07-07
這篇文章主要介紹了js中位運算的運用實例分析,需要的朋友可以參考下2018-12-12
這篇文章主要給大家介紹了關(guān)于Three.Js實現(xiàn)顏色自定義變換效果的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
這篇文章主要是對XMLHttpRequest的緩存問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JS實現(xiàn)點擊循環(huán)切換顯示內(nèi)容的方法
這篇文章主要介紹了JS實現(xiàn)點擊循環(huán)切換顯示內(nèi)容的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素的獲取、屬性設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
微信小程序button標(biāo)簽open-type屬性原理解析
這篇文章主要介紹了微信小程序button標(biāo)簽open-type屬性原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
JavaScript 箭頭函數(shù)的特點、與普通函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript 箭頭函數(shù)的特點、與普通函數(shù)的區(qū)別,很多情況下，箭頭函數(shù)和函數(shù)表達(dá)式創(chuàng)建的函數(shù)并無區(qū)別，只有寫法上的不同，本文第二塊內(nèi)容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別，感興趣的朋友跟隨小編一起看看吧2021-11-11
這篇文章主要介紹了詳解如何探測小程序返回到webview頁面，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
E3 tree 1.6在Firefox下顯示問題的修復(fù)方法
tree 在Firefox下只顯示一句話,用firebug查看頁面元素觀察發(fā)現(xiàn),兩個script導(dǎo)入被一個<script>分隔開了,顯然是document.write的問題.由于Firefox對js規(guī)范的檢查比較嚴(yán)格,肯定一些字符輸出的的時候沒有轉(zhuǎn)義2013-01-01
如何遍歷對象的屬性?...2006-09-09