生成一个html+js的计时器小工具
时间: 2024-04-12 20:31:08 浏览: 14
好的,我可以帮你生成一个计时器小工具的 HTML + JS 代码。以下是代码示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计时器</title>
</head>
<body>
<h1>计时器</h1>
<div>
<label for="hours">时:</label>
<input id="hours" type="number" min="0" max="23" value="0">
<label for="minutes">分:</label>
<input id="minutes" type="number" min="0" max="59" value="0">
<label for="seconds">秒:</label>
<input id="seconds" type="number" min="0" max="59" value="0">
</div>
<div>
<button id="startButton">开始</button>
<button id="pauseButton">暂停</button>
<button id="resetButton">重置</button>
</div>
<div>
<p id="timerDisplay">00:00:00</p>
</div>
<script src="timer.js"></script>
</body>
</html>
```
JS 代码:
```js
// 计时器
var hoursInput = document.getElementById("hours");
var minutesInput = document.getElementById("minutes");
var secondsInput = document.getElementById("seconds");
var startButton = document.getElementById("startButton");
var pauseButton = document.getElementById("pauseButton");
var resetButton = document.getElementById("resetButton");
var timerDisplay = document.getElementById("timerDisplay");
var hours = 0;
var minutes = 0;
var seconds = 0;
var timer;
function startTimer() {
timer = setInterval(function() {
seconds--;
if (seconds < 0) {
seconds = 59;
minutes--;
if (minutes < 0) {
minutes = 59;
hours--;
if (hours < 0) {
hours = 0;
minutes = 0;
seconds = 0;
clearInterval(timer);
}
}
}
updateDisplay();
}, 1000);
}
function pauseTimer() {
clearInterval(timer);
}
function resetTimer() {
hours = hoursInput.value;
minutes = minutesInput.value;
seconds = secondsInput.value;
updateDisplay();
}
function updateDisplay() {
timerDisplay.innerText = padZero(hours) + ":" + padZero(minutes) + ":" + padZero(seconds);
}
function padZero(num) {
if (num < 10) {
return "0" + num;
} else {
return num;
}
}
startButton.addEventListener("click", startTimer);
pauseButton.addEventListener("click", pauseTimer);
resetButton.addEventListener("click", resetTimer);
```
你只需要将上述代码保存到两个不同的文件中(如 `timer.html` 和 `timer.js`),并在浏览器中打开 `timer.html` 文件,即可看到一个计时器小工具。