- JS中秒表的计时，是练习定时器的最好的方式之一，它包含了定时器的创建、清除、变量等相关问题，而秒表的功能实现是多样化的，比如：特定按钮的disabled、是否需要秒表的记录等。这里我用事件的委托的方法来实现秒表四个功能，譬如下面的代码，这里没有设置花哨的样式(主要还是审美力的问题~~~)，这里主要体现JS的代码思路，首先，先贴出一个gif图，让大家先看一下效果，欢迎大家评论、提异。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box {
border: 1px solid black;
margin: 0 auto;
width: 200px;
height: 200px;
}
.show {
text-align: center;
font-size: 30px;
margin: 20px auto;
}
button:nth-of-type(1) {
margin-left: 7px;//为了让button按钮视觉上居中
}
</style>
</head>
<body>
<div id="box">
<div class="show">00:00:00:00</div>
<button name="btn1">开始</button>
<button name="btn2" -disabled>暂停</button>
<button name="btn3" -disabled>继续</button>
<button name="btn4" -disabled>重置</button>
</div>
<script>
// 变量的定义
var oBox = document.querySelector('#box');
var oShow = document.querySelector('.show');
var time = 0; //全局定时器名
var h = 0; //时，计时全局变量
var m = 0; //分，计时全局变量
var s = 0; //秒，计时全局变量
var ms = 0; //1毫秒*10，计时全局变量
var hStr = 0; //时，存储计时后的显示数据
var mStr = 0; //分，存储计时后的显示数据
var sStr = 0; //秒，存储计时后的显示数据
var msStr = 0;//1ms*10，存储计时后的显示数据
//全局计时变量，是为了防止定时器清除时，数据清零
// 点击事件
oBox.onclick = function (e) {
//当然这里的参数e.target应当有兼容，主要是针对低版本IE浏览器 ||scrElement...
//这里就不写了
var eTarget = e.target;
if (eTarget.getAttribute('name') == 'btn1') {
setTimeStr();
}
if (eTarget.getAttribute('name') == 'btn2') {
clearInterval(time);
}
if (eTarget.getAttribute('name') == 'btn3') {
setTimeStr();
}
if (eTarget.getAttribute('name') == 'btn4') {
// 将所有的变量、内容恢复至初始状态
h = 0;
m = 0;
s = 0;
ms = 0;
hStr = 0;
mStr = 0;
sStr = 0;
msStr = 0;
clearInterval(time);
oShow.innerHTML = '00:00:00:00';
}
}
// 计时器
function setTimeStr() {
//防止调用函数时，多次创建定时器
clearInterval(time);
// 创建定时器
time = setInterval(function () {
ms++;
if (ms == 100) {
ms = 0;
s++;
}
if (s == 60) {
s = 0;
m++;
}
if (m == 60) {
m = 0;
h++;
}
if (h > 99) {
h = 0;
}
msStr = ms >= 10 ? ms : '0' + ms;
sStr = s >= 10 ? s : '0' + s;
mStr = m >= 10 ? m : '0' + m;
hStr = h >= 10 ? h : '0' + h;
//每次定时，都有向页面写入内容
return oShow.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`;
}, 10)
}
</script>
</body>
</html>
欢迎大家评论、提异哦！
