js写一个计时器,并可以手动开始和暂停
时间: 2024-03-12 22:49:28 浏览: 11
好的,以下是一个简单的JavaScript计时器,并且可以手动开始和暂停:
HTML部分:
```html
<p id="timer">00:00:00</p>
<button id="start">开始</button>
<button id="pause">暂停</button>
```
JavaScript部分:
```javascript
let timer = document.getElementById("timer");
let startBtn = document.getElementById("start");
let pauseBtn = document.getElementById("pause");
let hours = 0;
let minutes = 0;
let seconds = 0;
let interval;
function startTimer() {
interval = setInterval(function() {
seconds++;
if (seconds == 60) {
minutes++;
seconds = 0;
}
if (minutes == 60) {
hours++;
minutes = 0;
}
timer.innerHTML = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
}, 1000);
}
function pauseTimer() {
clearInterval(interval);
}
startBtn.addEventListener("click", function() {
startTimer();
});
pauseBtn.addEventListener("click", function() {
pauseTimer();
});
```
以上代码中,我们创建了一个`timer`元素来显示计时器的时间。然后,我们创建了两个按钮用于开始和暂停计时器。接下来,我们定义了三个变量`hours`,`minutes`和`seconds`,并将其初始化为0。然后,我们定义了两个函数`startTimer()`和`pauseTimer()`,当单击“开始”按钮时,`startTimer()`函数将启动计时器,并且`pauseTimer()`函数将在单击“暂停”按钮时停止计时器。`setInterval()`函数用于每秒更新计时器的时间,最后,我们将两个按钮与相应的函数进行了监听。