如何用html js css 做一个计时器
时间: 2024-01-11 11:04:46 浏览: 39
以下是一个简单的计时器的HTML、CSS和JavaScript代码:
HTML代码:
```html
<div class="timer">
<h2>计时器</h2>
<div class="display">
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<div class="buttons">
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="reset">重置</button>
</div>
</div>
```
CSS代码:
```css
.timer {
text-align: center;
margin-top: 50px;
}
.display {
font-size: 50px;
margin: 20px 0;
}
.buttons {
margin-top: 20px;
}
button {
font-size: 20px;
padding: 10px 20px;
margin: 0 10px;
}
```
JavaScript代码:
```javascript
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var startButton = document.getElementById("start");
var stopButton = document.getElementById("stop");
var resetButton = document.getElementById("reset");
var totalSeconds = 0;
var timer;
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
function setTime() {
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds % 60);
minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}
startButton.onclick = function() {
timer = setInterval(setTime, 1000);
}
stopButton.onclick = function() {
clearInterval(timer);
}
resetButton.onclick = function() {
clearInterval(timer);
totalSeconds = 0;
minutesLabel.innerHTML = "00";
secondsLabel.innerHTML = "00";
}
```
这个计时器具有开始、停止和重置按钮。点击“开始”按钮将启动计时器,每秒钟更新计时器的值。点击“停止”按钮将停止计时器。点击“重置”按钮将重置计时器并将其值设置为零。