html部分
js中
//通过id获取标签的方法进行简化
//以美元符号命名函数名
function $(id){
return document.getElementById(id);
};
var timer = null;//记录定时器返回值
var i = 0;//总秒数
var isRunning = false;//代表当前定时器是否运行
//获取按钮
function startFunc(){
timer = setInterval(function(){
i++;
$("sec").innerHTML = doubleNum(i % 60);
$("min").innerHTML = doubleNum(parseInt(i / 60) %60);
$("hour").innerHTML = doubleNum(parseInt(i / 3600));
},1000);
};
//暂停
function pasueFunc(){
clearInterval(timer);
};
$("btn").onclick = function(){
if(!isRunning){
$("btn").innerHTML = "暂停";
isRunning = true;
startFunc();
}else{
$("btn").innerHTML = "开始";
isRunning = false;
pasueFunc();
}
}
//复位
$("reset").onclick = function(){
clearInterval(timer);
i = 0;
$("btn").innerHTML = "开始";
isRunning = false;
$("sec").innerHTML = "00";
$("min").innerHTML = "00";
$("hour").innerHTML = "00";
}
//个位数转化成双位数
function doubleNum(n) {
if(n<10){
return "0" + n;
}else{
return n;
}
}
效果