<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>计时器</h1>
<p>
<span id="hour">00</span>
<span id="">:</span>
<span id="minute">00</span>
<span id="">:</span>
<span id="second">00</span>
</p>
<p>
<button type="button" id="start">开始</button>
<button type="button" id="pause">暂停</button>
<button type="button" id="stop">停止</button>
</p>
<script>
var hour=0;
var minute=0;
var second=0;
// 计时器id
var intervalID;
// 获取id
function getEleById(id){
return document.getElementById(id);
}
// 补零
function addZero(num){
return num>=10?num:'0'+num;
}
// 将时分秒设置到页面上
function setTimeOnDOM(){
getEleById('hour').innerText=addZero(hour);
getEleById('minute').innerText=addZero(minute);
getEleById('second').innerText=addZero(second);
}
getEleById('start').οnclick=function(){
// 如果计时器存在，直接返回，避免重新创建计时器。
if(intervalID){
return;
}
// 开启计时器
intervalID=setInterval(function(){
second++;
if(second>=60){
second=0;
minute++;
}
if(minute>=60){
minute=0;
hour++;
}
if(hour>=24){
clearInterval(intervalID);
}
setTimeOnDOM();
},1000);
}
getEleById('pause').οnclick=function(){
clearInterval(intervalID);
intervalID=null;
}
getEleById('stop').οnclick=function(){
clearInterval(intervalID);
intervalID=null;
hour=minute=second=0;
setTimeOnDOM()
}
</script>
</body>
</html>
1638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
