JavaScript怎么实现简单的秒表效果?
时间: 2023-12-15 18:17:27 浏览: 26
JavaScript 可以通过 `setInterval` 和 `clearInterval` 方法来实现简单的秒表效果。以下是一个简单的 JavaScript 秒表代码:
```javascript
var startTime = 0;
var start = 0;
var end = 0;
var diff = 0;
var timerID = 0;
function chrono() {
end = new Date();
diff = end - start;
diff = new Date(diff);
var msec = diff.getMilliseconds();
var sec = diff.getSeconds();
var min = diff.getMinutes();
var hr = diff.getHours()-1;
if (min < 10){
min = "0" + min;
}
if (sec < 10){
sec = "0" + sec;
}
if(msec < 10){
msec = "00" +msec;
}
else if(msec < 100){
msec = "0" +msec;
}
document.getElementById("timer").innerHTML = hr + ":" + min + ":" + sec + ":" + msec;
}
function chronoStart() {
start = new Date();
timerID = setInterval(chrono, 10);
}
function chronoStop() {
clearInterval(timerID);
}
function chronoReset() {
document.getElementById("timer").innerHTML = "0:00:00:000";
}
```
这个代码与 HTML 代码结合使用,可以显示一个秒表,并且包含了三个按钮:开始、停止和重置。点击开始按钮将启动计时器(使用 `setInterval` 方法),点击停止按钮将停止计时器(使用 `clearInterval` 方法),点击重置按钮将重置计时器(将计时器时间设为 0)。其中 `chrono` 函数用于更新计时器的时间。