JavaScript实现基于JSON配置的连续倒计时教程-js教程-PHP中文网

JavaScript实现基于JSON配置的连续倒计时教程

心靈之曲

发布： 2025-11-21 18:30:35

原创

833人浏览过

JavaScript实现基于JSON配置的连续倒计时教程

本教程详细介绍如何利用javascript实现一系列基于json数据配置的连续倒计时功能。针对传统循环无法有效管理多个顺序执行倒计时的挑战，文章核心阐述了通过递归函数优雅地处理每个倒计时的启动、运行与结束，并在所有倒计时完成后执行指定操作的实现策略，确保倒计时按序无缝衔接。

在前端开发中，我们经常需要实现倒计时功能。当需求升级为根据一组预定义数据（例如JSON对象数组）依次执行多个倒计时，并在全部完成后触发特定动作时，简单的 for 循环或 forEach 循环往往无法直接满足要求。这是因为倒计时通常涉及 setInterval，它是一个异步操作，循环会立即启动所有倒计时，导致它们并行运行而非顺序执行。为了解决这一问题，我们需要一种机制来确保一个倒计时完成后，才启动下一个。

核心策略：递归函数

解决连续倒计时问题的关键在于利用递归函数。递归函数能够在一个倒计时完成后，根据条件判断是否启动下一个倒计时，从而实现串行执行。这种方法避免了传统循环的并行执行问题，使得每个倒计时都能独立且按序完成。

实现步骤

首先，我们定义倒计时的数据结构，并准备基本的HTML元素来显示倒计时。

1. 数据结构与HTML骨架

倒计时数据将以JSON数组的形式提供，每个对象包含 id、title、hour、minute 和 second 等属性。

立即学习“Java免费学习笔记（深入）”；

JSON 数据示例：

[
    {
        "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 结构：

析稿Ai写作

科研人的高效工具：AI论文自动生成，十分钟万字，无限大纲规划写作思路。

142

查看详情

<div class="output"></div>

登录后复制

一个简单的 div 元素足以作为倒计时信息的显示容器。

2. 初始化变量

在JavaScript中，我们需要定义一些全局变量来管理倒计时的状态：

output: 用于显示倒计时信息的DOM元素。
interval: setInterval 的ID，用于清除当前的倒计时。
curTimer: 当前正在执行的倒计时在 timers 数组中的索引。
maxSeconds: 当前倒计时的总秒数。
thisTimer: 当前正在执行的倒计时的数据对象。
timers: 包含所有倒计时数据的JSON数组。

const output = document.querySelector(".output");
let interval;
let curTimer = 0; // 当前倒计时的索引
let maxSeconds = 0; // 当前倒计时的总秒数
let thisTimer; // 当前倒计时的数据对象

const timers = [{
    "id": "1",
    "title": "countdown 1",
    "hour": "0",
    "minute": "0",
    "second": "4"
  },
  {
    "id": "2",
    "title": "countdown 2",
    "hour": "0",
    "minute": "0",
    "second": "4"
  },
  {
    "id": "3",
    "title": "countdown 3",
    "hour": "0",
    "minute": "0",
    "second": "4"
  }
];

登录后复制

3. 显示倒计时信息

创建一个辅助函数 displayTime 来更新 output 元素的内容，显示当前的剩余秒数和倒计时标题。

const displayTime = () => {
  output.innerHTML = `${maxSeconds} timer ${thisTimer.title}`;
};

登录后复制

4. 核心逻辑：timer 递归函数

这是实现连续倒计时的核心。timer 函数接收两个参数：timers 数组和 inc（当前倒计时的索引）。

const timer = (timers, inc) => {
  // 1. 获取当前倒计时的数据
  thisTimer = timers[inc];
  // 2. 计算当前倒计时的总秒数
  maxSeconds = (parseInt(thisTimer.hour) * 3600) + 
               (parseInt(thisTimer.minute) * 60) + 
               parseInt(thisTimer.second);

  // 3. 启动倒计时
  interval = setInterval(() => {
    displayTime(); // 更新显示
    maxSeconds--;  // 秒数递减

    // 4. 判断当前倒计时是否结束
    if (maxSeconds < 0) {
      clearInterval(interval); // 清除当前倒计时

      // 5. 判断是否还有下一个倒计时
      if (curTimer < timers.length - 1) {
        curTimer++; // 移动到下一个倒计时
        timer(timers, curTimer); // 递归调用自身，启动下一个倒计时
      } else {
        // 6. 所有倒计时完成
        output.innerHTML = "所有倒计时完成！"; // 可以替换为重定向或其他完成操作
        // window.location.href = "your_redirect_url.html"; // 示例重定向
      }
    }
  }, 1000); // 每秒执行一次
};

// 首次调用，启动第一个倒计时
timer(timers, curTimer);

登录后复制

关键点解析：

maxSeconds 计算: 将小时、分钟和秒转换为总秒数。
setInterval: 每秒执行一次 displayTime 和 maxSeconds--。
结束判断 (maxSeconds < 0): 当当前倒计时完成时，clearInterval 停止当前 setInterval。
递归调用条件 (curTimer < timers.length - 1):
- 如果当前倒计时不是数组中的最后一个，curTimer 递增，然后 timer 函数递归调用自身，传入新的 curTimer 值，从而启动下一个倒计时。
- 这种机制确保了一个倒计时完全结束后，下一个才会被启动。
全部完成 (else): 如果 curTimer 已经指向最后一个倒计时，并且该倒计时也已完成，则表示所有倒计时任务已完成，此时可以执行最终的操作，例如显示 "DONE" 消息或进行页面重定向。

完整代码示例

将上述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; 
            color: #333; 
            padding: 20px; 
            border: 2px solid #ccc; 
            border-radius: 8px; 
            background-color: #fff; 
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
            text-align: center;
        }
    </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"
          }
        ];

        // 辅助函数：格式化

登录后复制

以上就是JavaScript实现基于JSON配置的连续倒计时教程的详细内容，更多请关注php中文网其它相关文章！