html代碼:
代碼如下:
js代碼:
代碼如下:
/*
*@author:hyjiacan
*date:15:57 2010-9-5
*name:timer
*/
var ctrl = document.getElementById("ctrl"); //控制按鈕對象
var timer = document.getElementById("timer"); //時間顯示對象
var hour, minute, second; //時,分 ,鈔
var t; //setTimeout方法
//初始化顯示和按鈕
var init = function(){
timer.innerHTML = "00:00:00"; //由于FF不支持使用innerText,故采用innerHTML
hour = minute = second = 0; //初始化顯示
ctrl.setAttribute("value", "開始"); //初始化控制按鈕文字
ctrl.setAttribute("onclick", "startit()"); //初始化控制按鈕事件
clearTimeout(t);
}
//開始計時
function startit(){
t = setTimeout("startit()", 1000); //每隔1秒(1000毫秒)遞歸調(diào)用一次
second++;
if(second>=60){ //判斷秒是否到60, 是則進位
second = 0;
minute++;
}
if(minute>=60){ //判斷分是否到60, 是則進位
minute = 0;
hour++;
}
timer.innerHTML = j(hour) + ":" + j(minute) + ":" + j(second) ; //更新顯示
//更改按鈕狀態(tài)
ctrl.setAttribute("value", "暫停/停止"); //更改按鈕文字
ctrl.setAttribute("onclick", "pause()"); //更改按鈕觸發(fā)事件
}
//顯示數(shù)字填補,即當(dāng)顯示的值為0-9時,在前面填補0;如:1:0:4, 則填補成為 01:00:04
var j = function(arg){
return arg>=10 ? arg : "0" + arg;
}
//暫停計時
var pause = function(){
clearTimeout(t);
ctrl.setAttribute("onclick", "startit()");
ctrl.setAttribute("value", "繼續(xù)");
}
使用setTimeout遞歸處理。 在這之中,有一個很重要的問題——延遲,這樣的做法和系統(tǒng)CPU資源有很大關(guān)系,而且函數(shù)的調(diào)用也要耗費時間,最終就導(dǎo)致計數(shù)的誤差越來越大。
還有另一個方法:
在按下開始按鈕的時候,記錄下按下的時間(毫秒),然后每隔1秒讀取一次當(dāng)前時間,再用當(dāng)前時間減去按下時記下的時間,算出經(jīng)過了的時間。
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com