<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 全局保存我们的计时器id， sec_count 用来计时，my_start 用来控制计时器运行状态
var timer_id = -1;
var sec_count = 0;
var my_start = 0;
function start() {
//如果开始计时了 返回 什么也不做了
if(my_start == 1) {
return;
}
// var sec_count = 0;
//如果没开始 就修改计时器的运行状态
my_start = 1;
//创建计时器 计时
timer_id = setInterval(function() {
//计数器加加
sec_count++;
//计算时分秒
var sec = sec_count % 60;
var minute = Math.floor(sec_count % 60 / 60);
var hour = Math.floor(sec_count / 3600);
//拿元素
var sec_tag = document.getElementById("second");
var minute_tag = document.getElementById("minute");
var hour_tag = document.getElementById("hour");
//设置元素值
sec_tag.innerHTML = sec;
minute_tag.innerText = minute;
hour_tag.innerText = hour;
}, 1000)
}
function pause() {
//清空计时器
clearInterval(timer_id);
//重置我们的函数的运行状态
my_start = 0;
}
</script>
</head>
<body>
<span id="hour">00</span>时<span id="minute">00</span>分<span id="second">00</span>秒
<button onclick="start()">计时</button>
<button onclick="pause()">暂停</button>
</body>
</html>
网友评论