原生js秒表实现代码_时间日期



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) ; //更新显示
//更改按钮状态
ctrl.setAttribute("value", "暂停/停止"); //更改按钮文字
ctrl.setAttribute("onclick", "pause()"); //更改按钮触发事件
}
//显示数字填补，即当显示的值为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", "继续");
}

使用setTimeout递归处理。 在这之中，有一个很重要的问题——延迟，这样的做法和系统CPU资源有很大关系，而且函数的调用也要耗费时间，最终就导致计数的误差越来越大。

还有另一个方法：

在按下开始按钮的时候，记录下按下的时间（毫秒），然后每隔1秒读取一次当前时间，再用当前时间减去按下时记下的时间，算出经过了的时间。