html页面计时器
以下是一个简单的HTML页面计时器的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>计时器</title>
<script>
// 定义计时器变量
var timer;
// 开始计时
function startTimer() {
// 获取显示时间的元素
var display = document.getElementById("display");
// 获取输入的时间
var minutes = parseInt(document.getElementById("minutes").value);
var seconds = parseInt(document.getElementById("seconds").value);
// 将时间转换成秒数
var totalSeconds = minutes * 60 + seconds;
// 更新显示时间的元素
display.innerHTML = formatTime(totalSeconds);
// 设置计时器，每秒更新时间
timer = setInterval(function() {
// 减少剩余秒数
totalSeconds--;
// 更新显示时间的元素
display.innerHTML = formatTime(totalSeconds);
// 如果剩余时间为0，停止计时器
if (totalSeconds <= 0) {
clearInterval(timer);
}
}, 1000);
}
// 停止计时
function stopTimer() {
clearInterval(timer);
}
// 格式化时间为"分:秒"的格式
function formatTime(totalSeconds) {
var minutes = Math.floor(totalSeconds / 60);
var seconds = totalSeconds % 60;
// 添加前导零
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
return minutes + ":" + seconds;
}
</script>
</head>
<body>
<h1>计时器</h1>
<label for="minutes">分钟数：</label>
<input type="number" id="minutes" min="0" max="59" value="0">
<br>
<label for="seconds">秒数：</label>
<input type="number" id="seconds" min="0" max="59" value="0">
<br>
<button onclick="startTimer()">开始</button>
<button onclick="stopTimer()">停止</button>
<br>
<h2 id="display">00:00</h2>
</body>
</html>
这个示例代码包含了一个输入框用于输入分钟数和秒数，以及一个开始按钮和停止按钮。在点击开始按钮后，计时器会开始倒计时，并在页面上显示剩余时间。在点击停止按钮后，计时器会停止
原文地址: https://www.cveoy.top/t/topic/ifXE 著作权归作者所有。请勿转载和采集!