本文将指导您如何使用javascript构建一个灵活的连续倒计时系统。通过解析json格式的配置数据，系统能够依次显示并执行多个独立的倒计时任务。我们将重点介绍如何利用递归函数而非传统循环来优雅地管理计时器序列，并在所有倒计时完成后执行指定操作，适用于需要动态、按序展示多个计时场景的应用。
在现代Web应用中，我们经常需要展示一系列按顺序执行的计时任务，例如分阶段的考试、多步骤的限时活动或连续的任务提醒。传统的使用 for 循环来处理这类需求往往会导致计时器逻辑混乱或无法按预期顺序执行。本文将介绍一种利用递归函数来优雅地管理和执行基于JSON配置的连续倒计时的方法。
要实现连续倒计时，关键在于确保一个计时器结束后，才能启动下一个计时器。这要求我们维护当前正在执行的计时器状态，并在其完成后触发下一个计时器的启动。
首先，我们需要一个简单的HTML元素来显示倒计时信息。
<div class="output"></div>
这个 div 元素将作为倒计时文本的输出容器。
立即学习“Java免费学习笔记（深入）”；
接下来是核心的JavaScript逻辑。我们将定义一个JSON数组来存储所有的倒计时配置，并实现一个递归函数来管理它们的顺序执行。
我们首先定义一些全局变量来管理倒计时状态，以及一个包含所有倒计时任务的JSON数组。
const output = document.querySelector(".output"); // 获取输出元素
let interval; // 用于存储 setInterval 的ID
let curTimer = 0; // 当前计时器的索引，从0开始
let maxSeconds = 0; // 当前计时器剩余的总秒数
let thisTimer; // 当前计时器的数据对象
// 倒计时任务的JSON配置数组
const timers = [{
"id": "1",
"title": "倒计时任务一",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "2",
"title": "倒计时任务二",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "3",
"title": "倒计时任务三",
"hour": "0",
"minute": "0",
"second": "4"
}
];创建一个辅助函数来更新HTML元素的显示内容。
const displayTime = () => {
// 格式化剩余时间为 HH:MM:SS
const hours = Math.floor(maxSeconds / 3600);
const minutes = Math.floor((maxSeconds % 3600) / 60);
const seconds = maxSeconds % 60;
const formattedTime = [
hours.toString().padStart(2, '0'),
minutes.toString().padStart(2, '0'),
seconds.toString().padStart(2, '0')
].join(':');
output.innerHTML = `${thisTimer.title} 剩余: ${formattedTime}`;
};timer 函数是整个系统的核心。它负责启动单个倒计时，并在倒计时结束后决定是继续下一个任务还是宣布完成。
const timer = (timersArray, currentIndex) => {
// 获取当前计时器的数据
thisTimer = timersArray[currentIndex];
if (!thisTimer) {
output.innerHTML = "所有倒计时任务已完成！";
// 可以在此处添加重定向逻辑，例如：
// window.location.href = "https://your-redirect-url.com";
return;
}
// 将小时、分钟、秒转换为总秒数
maxSeconds = (parseInt(thisTimer.hour) * 3600) +
(parseInt(thisTimer.minute) * 60) +
parseInt(thisTimer.second);
// 清除前一个计时器，以防万一
if (interval) {
clearInterval(interval);
}
// 启动当前计时器
interval = setInterval(() => {
displayTime(); // 更新显示
maxSeconds--; // 秒数递减
// 当当前计时器完成时
if (maxSeconds < 0) {
clearInterval(interval); // 清除当前计时器
// 检查是否还有下一个计时器
if (currentIndex < timersArray.length - 1) {
curTimer++; // 移动到下一个计时器索引
timer(timersArray, curTimer); // 递归调用，启动下一个计时器
} else {
// 所有计时器都已完成
output.innerHTML = "所有倒计时任务已完成！";
// 可以在此处添加重定向逻辑，例如：
// window.location.href = "https://your-redirect-url.com";
}
}
}, 1000); // 每秒执行一次
};
// 启动第一个倒计时
timer(timers, curTimer);将上述HTML和JavaScript代码整合，即可得到一个完整的连续倒计时系统。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON配置的连续倒计时</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.output {
font-size: 2em;
font-weight: bold;
color: #333;
padding: 20px;
border: 2px solid #007bff;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="output"></div>
<script>
const output = document.querySelector(".output");
let interval;
let curTimer = 0;
let maxSeconds = 0;
let thisTimer;
const timers = [{
"id": "1",
"title": "倒计时任务一",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "2",
"title": "倒计时任务二",
"hour": "0",
"minute": "0",
"second": "4"
},
{
"id": "3",
"title": "倒计时任务三",
"hour": "0",
"minute": "0",
"second": "4"
}
];
const displayTime = () => {
const hours = Math.floor(maxSeconds / 3600);
const minutes = Math.floor((maxSeconds % 3600) / 60);
const seconds = maxSeconds % 60;
const formattedTime = [
hours.toString().padStart(2, '0'),
minutes.toString().padStart(2, '0'),
seconds.toString().padStart(2, '0')
].join(':');
output.innerHTML = `${thisTimer.title} 剩余: ${formattedTime}`;
};
const timer = (timersArray, currentIndex) => {
thisTimer = timersArray[currentIndex];
if (!thisTimer) {
output.innerHTML = "所有倒计时任务已完成！";
// 可以在此处添加重定向逻辑
// window.location.href = "https://your-redirect-url.com";
return;
}
maxSeconds = (parseInt(thisTimer.hour) * 3600) +
(parseInt(thisTimer.minute) * 60) +
parseInt(thisTimer.second);
if (interval) {
clearInterval(interval);
}
interval = setInterval(() => {
displayTime();
maxSeconds--;
if (maxSeconds < 0) {
clearInterval(interval);
if (currentIndex < timersArray.length - 1) {
curTimer++;
timer(timersArray, curTimer);
} else {
output.innerHTML = "所有倒计时任务已完成！";
// 所有倒计时完成后执行重定向
// window.location.href = "https://your-redirect-url.com";
}
}
}, 1000);
};
timer(timers, curTimer); // 启动第一个倒计时
</script>
</body>
</html>通过采用递归函数而非简单的循环结构，我们成功地构建了一个基于JSON配置的连续倒计时系统。这种方法不仅代码结构清晰，易于理解和维护，而且能够灵活地处理多个顺序执行的计时任务，为Web应用的动态计时需求提供了一个健壮的解决方案。您可以根据实际需求，进一步扩展此功能，以提供更丰富的用户体验和更强大的错误处理能力。
以上就是JavaScript实现基于JSON配置的连续倒计时系统的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
419
收藏
