js計算使用者在網頁停留時間的程式碼例項

admin發表於2017-03-23
JS網頁

有時候我們需要計算一個使用者在網頁的停留時間，下面就通過程式碼例項介紹一下如何實現此功能，當然下面的程式碼相對於專業的程式碼還是稍顯簡單，但是足以說明實現的原理。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.softwhy.com/" />     
<title>螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function(){
  var txt=document.getElementsByTagName("input")[0];
  var second=0; 
  var minute=0; 
  var hour=0; 
  function interval(){ 
    second++; 
    if(second==60){ 
      second=0;
      minute+=1; 
    } 
    if(minute==60){ 
      minute=0;
      hour+=1; 
    } 
    txt.value=hour+"時"+minute+"分"+second+"秒"; 
    setTimeout(interval,1000); 
  } 
  interval()
}
</script>
</head> 
<body> 
<div>您在本站已停留:</div>
<input name="textarea" type="text" value=""/> 
</body> 
</html>

以上程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.實現原理:

所謂的計算停留時間就是統計一下從進入網頁到離開網頁的時長有多少，所以當載入完成網頁之後就進行時間累計，函式interval()每執行一次都會都會時間加以，然後再以遞迴的方式不但執行函式interval()這樣就實現了時間的累計效果。

二.相關閱讀:

1.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。

2.setTimeout()函式可以參閱window.setTimeout()一章節。 

相關文章