利用js實(shí)現(xiàn)在瀏覽器狀態(tài)欄顯示訪問者在本頁停留的時(shí)間
問題描述：在狀態(tài)欄上顯示 ，訪問者在本頁停留的 時(shí)間 （如：您在本頁停留了 （如：您在本頁停留了 X小時(shí) X分 X秒）
該問題相當(dāng)于是設(shè)計(jì)一個計(jì)時(shí)器，用于顯示瀏覽者在該頁面停留了多長時(shí)間。要解決該問題，我想到的主要有兩種方法。
方法一：利用系統(tǒng)時(shí)間。即先設(shè)置一個變量，用于獲取登錄開始時(shí)間startTime,然后利用setTimeout()函數(shù)讓頁面不停的刷新，在刷新的同時(shí)，獲取當(dāng)前時(shí)間nowTime，然后用當(dāng)前時(shí)間減去登錄開始時(shí)間，即為停留時(shí)間。在此就不做詳細(xì)編寫。重點(diǎn)說下下面使用到的方法二來進(jìn)行實(shí)現(xiàn)。
方法二：設(shè)置三個變量：second,minute,hour。然后讓second不停的+1，并且利用setTimeout實(shí)現(xiàn)頁面每隔一秒刷新一次，當(dāng)second大于等于60時(shí)，minute開始+1，并且讓second重新置零。同理當(dāng)minute大于等于60時(shí)，hour開始+1。這樣即可實(shí)現(xiàn)計(jì)時(shí)功能。
方法二代碼如下：
<!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+"小時(shí)"+minute+"分"+second+"秒";
}
</script>
</body>
</html>
運(yùn)行效果如圖所示。
相關(guān)文章
Canvas實(shí)現(xiàn)數(shù)字雨和放大鏡效果的代碼示例
這篇文章主要介紹了如何Canvas實(shí)現(xiàn)數(shù)字雨和放大鏡效果，文中有完整的代碼示例，文章通過代碼介紹的非常清楚，感興趣的小伙伴跟著小編一起來看看吧2023-07-07
這篇文章主要介紹了js中位運(yùn)算的運(yùn)用實(shí)例分析,需要的朋友可以參考下2018-12-12
Three.Js實(shí)現(xiàn)顏色自定義變換效果實(shí)例
這篇文章主要給大家介紹了關(guān)于Three.Js實(shí)現(xiàn)顏色自定義變換效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
這篇文章主要是對XMLHttpRequest的緩存問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JS實(shí)現(xiàn)點(diǎn)擊循環(huán)切換顯示內(nèi)容的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎ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í)價(jià)值,需要的朋友可以參考下2020-01-01
JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別,很多情況下，箭頭函數(shù)和函數(shù)表達(dá)式創(chuàng)建的函數(shù)并無區(qū)別，只有寫法上的不同，本文第二塊內(nèi)容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別，感興趣的朋友跟隨小編一起看看吧2021-11-11
這篇文章主要介紹了詳解如何探測小程序返回到webview頁面，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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)格,肯定一些字符輸出的的時(shí)候沒有轉(zhuǎn)義2013-01-01
如何遍歷對象的屬性?...2006-09-09