1. 程式人生 > >js實現從0開始計時及顯示當前時間

js實現從0開始計時及顯示當前時間

需求:

頁面點選進來,就從0開始計時,動態顯示使用者停留在該頁面的時間。

思路:

記錄使用者進入該頁面的時間(初始時間);

不斷用當前時間-初始時間=在該頁面的停留時間;

需要注意的是,應該將js函式Time()放到<body>的onload中,即頁面一載入就執行

js函式應該放在<head>標籤中

js:

<script type="text/javascript">
   /*
    * 顯示當前時間函式
    * YQ
    */
    function Time()
    {
    var today=new Date(); 
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    duration(h,m,s);
    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('timeshow').value=h+":"+m+":"+s;
    t=setTimeout('Time()',500); //暫停0.5後執行Time()函式
    }
    /*
     * 個位數時補0
     */
    function checkTime(i) 
    {
    if (i<10) 
      {i="0" + i}
      return i
    }
    /*
     * 歷時:當前時間-開始時間
     * @author YQ
     */
    function duration(nh,nm,ns){
        var beginTime = document.getElementById('beginTime').value; //獲取計時初始值
        var beginT = new Array();
        beginT = beginTime.split(" ");
        beginT = beginT[1].split(":");
        var sh = Number(beginT[0]);
        var sm = Number(beginT[1]);
        var ss = Number(beginT[2]);
        //換算曆時 h:m:s
        var allS = (nh*3600+nm*60+ns)-(sh*3600+ sm*60 +ss);
        var dh = parseInt(allS/3600);
        var dm = parseInt((allS-dh*3600)/60);
        var ds = allS - dh*3600 - dm*60;
        document.getElementById('duration').value = dh+':'+dm+':'+ds;
    }
    
</script>

html:

<body onload="Time()"> 

<b>歷時:</b><input type="text" id="duration" style="border:0px;background-color:transparent;width:80px;" />
<b>當前時間:</b><input type="text" id="timeshow" style="border:0px;background-color:transparent;width:80px;" />
</body>