用js实现一个简单计时器功能
时间: 2024-04-30 12:19:31 浏览: 9
好的,以下是一个简单的计时器功能的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>计时器</title>
</head>
<body>
<h1 id="timer">0</h1>
<button id="startBtn">开始</button>
<button id="stopBtn">停止</button>
<button id="resetBtn">重置</button>
<script>
var timer = document.getElementById("timer");
var startBtn = document.getElementById("startBtn");
var stopBtn = document.getElementById("stopBtn");
var resetBtn = document.getElementById("resetBtn");
var count = 0;
var timerId;
function startTimer() {
timerId = setInterval(function() {
count++;
timer.innerText = count;
}, 1000);
}
function stopTimer() {
clearInterval(timerId);
}
function resetTimer() {
count = 0;
timer.innerText = count;
clearInterval(timerId);
}
startBtn.addEventListener("click", startTimer);
stopBtn.addEventListener("click", stopTimer);
resetBtn.addEventListener("click", resetTimer);
</script>
</body>
</html>
```
这个示例代码使用了 JavaScript 来实现计时器功能。当点击“开始”按钮后,定时器会每秒钟自动加一,同时将计时器的数值更新到页面上。当点击“停止”按钮后,定时器会停止计时。当点击“重置”按钮后,计时器会将数值重置为 0,并停止计时。