原生js 秒表實現代碼

更新時間：2012年07月24日 01:05:36 作者：

使用setTimeout遞歸處理。在這之中，有一個很重要的問題——延遲，這樣的做法和系統CPU資源有很大關系，而且函數的調用也要耗費時間，最終就導致計數的誤差越來越大

html代碼：

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<meta charset="gb2312"> 
<head> 
<style type="text/css"> 
#container { 
margin:0 auto; 
margin-top:10%; 
width:200px; 
} 
#timer { 
border:red double 1px; 
width:180px; 
height:76px; 
line-height:76px; 
font-size:32pt; 
color:green; 
} 
input { 
width:87px; 
} 
</style> 
</head> 
<body onload="init()"> 
<div id="container"> 
<div id="timer"></div> 
<input type="button" id="ctrl" /> 
<input type="reset" onclick="init()" /> 
</div> 
</body> 
</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毫秒）遞歸調用一次 
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ā)事件 
} 
//顯示數字填補，即當顯示的值為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遞歸處理。在這之中，有一個很重要的問題——延遲，這樣的做法和系統CPU資源有很大關系，而且函數的調用也要耗費時間，最終就導致計數的誤差越來越大。

還有另一個方法：

在按下開始按鈕的時候，記錄下按下的時間（毫秒），然后每隔1秒讀取一次當前時間，再用當前時間減去按下時記下的時間，算出經過了的時間。

您可能感興趣的文章: