html用JavaScript写计时代码
时间: 2023-12-24 16:04:59 浏览: 26
好的,以下是一个简单的HTML和JavaScript计时器代码,可以实现计时功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计时器</title>
</head>
<body>
<h1>计时器</h1>
<p>已用时间:<span id="timer">00:00:00</span></p>
<button onclick="startTimer()">开始</button>
<button onclick="stopTimer()">停止</button>
<button onclick="resetTimer()">重置</button>
<script>
var startTime, endTime, timerInterval;
var timerElement = document.getElementById("timer");
function startTimer() {
startTime = Date.now();
timerInterval = setInterval(updateTimer, 1000);
}
function stopTimer() {
endTime = Date.now();
clearInterval(timerInterval);
}
function resetTimer() {
startTime = null;
endTime = null;
clearInterval(timerInterval);
timerElement.innerText = "00:00:00";
}
function updateTimer() {
var elapsedTime = new Date(Date.now() - startTime);
var hours = elapsedTime.getUTCHours().toString().padStart(2, "0");
var minutes = elapsedTime.getUTCMinutes().toString().padStart(2, "0");
var seconds = elapsedTime.getUTCSeconds().toString().padStart(2, "0");
timerElement.innerText = hours + ":" + minutes + ":" + seconds;
}
</script>
</body>
</html>
```
在这个代码中,我们首先定义了一些变量来记录计时器的状态和计时器元素。然后,我们定义了几个函数来处理不同的计时器操作,如开始、停止和重置。最后,我们定义了一个更新计时器元素的函数,它将计算经过的时间并将其格式化为小时、分钟和秒数,并将其更新到计时器元素中。
请注意,此示例计时器使用Date对象来计算经过的时间。这种方法可能不是最精确的,但对于大多数用途而言已经足够了。