大概就是这样子的计时器
hmtl代码块
<span id="hour">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
<br>
<button id="start">开始</button>
<button id="pause">暂停</button>
<button id="reset">复位</button>
script代码块
//封装函数,方便读取使用html元素
function $(id){
return document.getElementById(id);
}
function doubleNum(n){
if(n<10){
return "0" n;
}else{
return n;
}
}
var i = 0 ;
var timer = null;
window.onload=function(){
//获取开始按钮
$("start").onclick = function(){
timer = setInterval(function(){
i ;
$("sec").innerHTML = doubleNum(i`);
$("min").innerHTML = doubleNum(parseInt((i/60)`));
$("hour").innerHTML = doubleNum(parseInt(i/3600));
},1000)
}
//获取暂停按钮
$("pause").onclick = function(){
clearInterval(timer);
}
//获取复位按钮
$("reset").onclick = function(){
i=0;
$("sec").innerHTML = "00";
$("min").innerHTML = "00";
$("hour").innerHTML = "00";
}
}
好了,这样计时器的功能就实现了