html
<div id="box">
<div id=count>
<span id="h">00</span>:
<span id="m">00</span>:
<span id="s">00</span>
</div>
<input id="start" type="button" value="开始">
<input id="pause" type="button" value="暂停">
<input id="stop" type="button" value="停止">
</div>
js代码
//将查找标签节点的操作进行简化,封装一个$函数
function $(id){
return document.getElementById(id);
}
window.onload=function(){
var count=0; //开始计数以后累加的总秒数
$("start").onclick=function(){
timer=setInterval(function(){
count++;
$("s").innerHTML=showNum(count%60);
$("m").innerHTML=showNum(parseInt(count/60)%60);
$("h").innerHTML=showNum(parseInt(count/3600));
},1000)
}
// 暂停
$("pause").onclick=function(){
clearInterval(timer);
}
// 停止 停止计数,数据清零(数据清零和页面展示数据清零)
$("stop").onclick=function(){
clearInterval(timer);
count=0;
$("s").innerHTML="00";
$("m").innerHTML="00";
$("h").innerHTML="00";
}
}
// 处理单个数字
function showNum(num){
if (num<10) {
return "0"+num;
}else{
return num;
}
}
最终的页面图