原生js 秒表實(shí)現(xiàn)代碼
<!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"); //控制按鈕對(duì)象
var timer = document.getElementById("timer"); //時(shí)間顯示對(duì)象
var hour, minute, second; //時(shí),分 ,鈔
var t; //setTimeout方法
//初始化顯示和按鈕
var init = function(){
timer.innerHTML = "00:00:00"; //由于FF不支持使用innerText,故采用innerHTML
hour = minute = second = 0; //初始化顯示
ctrl.setAttribute("value", "開(kāi)始"); //初始化控制按鈕文字
ctrl.setAttribute("onclick", "startit()"); //初始化控制按鈕事件
clearTimeout(t);
}
//開(kāi)始計(jì)時(shí)
function startit(){
t = setTimeout("startit()", 1000); //每隔1秒(1000毫秒)遞歸調(diào)用一次
second++;
if(second>=60){ //判斷秒是否到60, 是則進(jìn)位
second = 0;
minute++;
}
if(minute>=60){ //判斷分是否到60, 是則進(jìn)位
minute = 0;
hour++;
}
timer.innerHTML = j(hour) + ":" + j(minute) + ":" + j(second) ; //更新顯示
//更改按鈕狀態(tài)
ctrl.setAttribute("value", "暫停/停止"); //更改按鈕文字
ctrl.setAttribute("onclick", "pause()"); //更改按鈕觸發(fā)事件
}
//顯示數(shù)字填補(bǔ),即當(dāng)顯示的值為0-9時(shí),在前面填補(bǔ)0;如:1:0:4, 則填補(bǔ)成為 01:00:04
var j = function(arg){
return arg>=10 ? arg : "0" + arg;
}
//暫停計(jì)時(shí)
var pause = function(){
clearTimeout(t);
ctrl.setAttribute("onclick", "startit()");
ctrl.setAttribute("value", "繼續(xù)");
}
使用setTimeout遞歸處理。 在這之中,有一個(gè)很重要的問(wèn)題——延遲,這樣的做法和系統(tǒng)CPU資源有很大關(guān)系,而且函數(shù)的調(diào)用也要耗費(fèi)時(shí)間,最終就導(dǎo)致計(jì)數(shù)的誤差越來(lái)越大。
還有另一個(gè)方法:
在按下開(kāi)始按鈕的時(shí)候,記錄下按下的時(shí)間(毫秒),然后每隔1秒讀取一次當(dāng)前時(shí)間,再用當(dāng)前時(shí)間減去按下時(shí)記下的時(shí)間,算出經(jīng)過(guò)了的時(shí)間。
相關(guān)文章
JCalendar 日歷控件 v1.0 beta[兼容IE&Firefox] 有文檔和例子
JCalendar 日歷控件 v1.0 beta[兼容IE&Firefox] 有文檔和例子...2007-05-05關(guān)于js日期轉(zhuǎn)化為毫秒數(shù)“節(jié)省20%的效率和和節(jié)省9個(gè)字符“問(wèn)題
最近在看松散耦合可定制百度的開(kāi)源框架tangram.js目光突然就聚焦在一種獲得毫秒數(shù)的寫(xiě)法2012-03-03Javascript 日期處理之時(shí)區(qū)問(wèn)題
所以大家以后發(fā)現(xiàn)這類(lèi)問(wèn)題,可以看下時(shí)區(qū)是不是沒(méi)對(duì)應(yīng)上。2009-10-10js 3秒后跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)代碼
這篇文章主要介紹了js 3秒后跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-03-03實(shí)現(xiàn)javascript的延期執(zhí)行或者重復(fù)執(zhí)行的兩個(gè)函數(shù)
實(shí)現(xiàn)javascript的延期執(zhí)行或者重復(fù)執(zhí)行的兩個(gè)函數(shù)...2007-06-06JS date對(duì)象的減法處理實(shí)現(xiàn)代碼
JS date對(duì)象的減法處理實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-12-12利用js獲取服務(wù)器時(shí)間的兩個(gè)簡(jiǎn)單方法
js獲取服務(wù)器時(shí)間的兩個(gè)方法,代碼比較簡(jiǎn)單,需要的朋友可以參考下。2010-01-01日期處理的js庫(kù)(迷你版)--自建js庫(kù)總結(jié)
先推薦網(wǎng)上不錯(cuò)的日期js庫(kù):http://momentjs.com/ 其實(shí)這類(lèi)資源網(wǎng)絡(luò)上一抓一把,但是想要針對(duì)項(xiàng)目實(shí)用的還是不多,因?yàn)槲医佑|的那類(lèi)都經(jīng)常在日期而非深入到hour、minute、second!所以想干脆自己編個(gè)小庫(kù)吧,這樣以后寫(xiě)代買(mǎi)將省力很多,在這里分享下,希望對(duì)大家有用2011-11-11