Js实现简单的计时器功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div></div>
<button>开始</button>
<button>停止</button>
<button>重置</button>
<script>
/*
尝试完成 表秒的设定
定时器的累加
每间隔 0.1秒 累加时间
毫秒 累加至 1000 给 秒进位
秒 累加是 60 给 分钟进位
*/
</script>
<script>
var s = 0;//定义秒数
var f = 0;//定义分钟数
var h = 0;//定义小时数
let oDiv = document.querySelector('div');
let oBton1 = document.querySelectorAll('button')[0];
let oBton2 = document.querySelectorAll('button')[1];
let oBton3 = document.querySelectorAll('button')[2];
chongzhi();
// 重置函数
function chongzhi() {
oDiv.innerHTML = '0' + h + ':' + 0 + f + ':' + 0 + s;
}
// 点击开始计时
oBton1.addEventListener('click', function () {
let int = setInterval(function () {
s += 1;
if (s === 60) {
s = 0;
f += 1;
if (f === 60) {
h += 1;
}
}
if (s < 10 && f < 10) {
oDiv.innerHTML = '0' + h + ':' + 0 + f + ':' + 0 + s;
} else if (s < 10 && f >= 10) {
oDiv.innerHTML = '0' + h + ':' + f + ':' + 0 + s;
} else if (s >= 10 && f < 10) {
oDiv.innerHTML = '0' + h + ':' + 0 + f + ':' + s;
} else if (s >= 10 && f >= 10) {
oDiv.innerHTML = '0' + h + ':' + f + ':' + s;
}
}, 1000);
// 点击暂停
oBton2.addEventListener('click', function () {
clearInterval(int);
});
// 点击重置
oBton3.addEventListener('click', function () {
oDiv.innerHTML = 0 + '0' + ':' + 0 + 0 + ':' + 0 + 0;
});
});
</script>
</body>
</html>