基于JSON数据实现JavaScript连续倒计时教程-js教程-PHP中文网

基于JSON数据实现JavaScript连续倒计时教程

DDD

发布： 2025-11-21 18:21:17

原创

222人浏览过

基于JSON数据实现JavaScript连续倒计时教程

本教程详细介绍了如何使用javascript和递归函数实现一个基于json配置的连续倒计时系统。通过将多个倒计时任务存储在json数组中，我们能够依次显示每个倒计时，并在一个任务完成后自动启动下一个，最终在所有倒计时结束后执行指定操作，有效解决了传统循环导致setinterval冲突的问题。

引言

在前端开发中，我们经常会遇到需要按顺序执行多个任务的场景。例如，展示一系列按计划进行的活动倒计时，或者分阶段进行的用户引导。当这些任务涉及计时器（如倒计时）时，简单的循环结构往往无法满足“等待前一个任务完成再启动下一个”的需求。本文将深入探讨如何利用JavaScript的递归函数，结合setInterval，构建一个灵活且高效的基于JSON数据配置的连续倒计时系统。

核心概念

实现连续倒计时的关键在于如何正确地管理多个独立但又顺序相关的计时器。

为什么传统循环不适用

当您尝试使用for或forEach循环来为每个倒计时任务启动setInterval时，会发现所有计时器几乎同时开始执行，而不是一个接一个。这是因为JavaScript的循环是同步执行的，它们会立即遍历整个数组，并为每个元素安排一个独立的setInterval调用，而setInterval本身是异步的。因此，所有计时器都会在同一时刻被安排，导致它们并行运行。

递归函数的优势

递归函数提供了一种优雅的解决方案。通过让一个函数在完成其当前任务后，根据条件判断是否调用自身来处理下一个任务，我们可以实现任务的顺序执行。在这个倒计时场景中，当一个倒计时完成时，我们检查数组中是否还有下一个倒计时。如果有，我们就递归调用主计时器函数来启动下一个倒计时；如果没有，则表示所有任务已完成。

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

setInterval与clearInterval

setInterval函数用于每隔指定毫秒数重复执行一个函数。它会返回一个ID，我们可以使用clearInterval函数并传入这个ID来停止计时器。这是控制单个倒计时生命周期的核心机制。

数据结构

为了灵活配置多个倒计时任务，我们采用JSON数组来存储每个任务的详细信息。每个对象代表一个倒计时，包含ID、标题、以及具体的时、分、秒。

析稿Ai写作

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

142

查看详情

[
    {
        "id": "1",
        "title": "活动一即将开始",
        "hour": "0",
        "minute": "0",
        "second": "10"
    },
    {
        "id": "2",
        "title": "活动二倒计时",
        "hour": "0",
        "minute": "0",
        "second": "15"
    },
    {
        "id": "3",
        "title": "最终阶段",
        "hour": "0",
        "minute": "0",
        "second": "5"
    }
]

登录后复制

实现步骤

下面我们将逐步构建这个连续倒计时系统。

1. HTML结构

首先，我们需要一个简单的HTML元素来显示倒计时信息。

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

登录后复制

2. JavaScript变量初始化

我们需要定义一些全局变量来管理计时器的状态和DOM元素的引用。

const output = document.querySelector(".output"); // 倒计时显示区域
let interval; // 用于存储setInterval的ID，以便后续清除
let curTimer = 0; // 当前正在执行的倒计时在timers数组中的索引
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"
  }
];

登录后复制

3. 显示时间函数

创建一个辅助函数来更新output元素的内容，并格式化时间显示。

const displayTime = () => {
  // 格式化显示剩余时间为 HH:MM:SS
  const hours = Math.floor(maxSeconds / 3600);
  const minutes = Math.floor((maxSeconds % 3600) / 60);
  const seconds = maxSeconds % 60;

  const formattedHours = String(hours).padStart(2, '0');
  const formattedMinutes = String(minutes).padStart(2, '0');
  const formattedSeconds = String(seconds).padStart(2, '0');

  output.innerHTML = `${thisTimer.title}: ${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
};

登录后复制

4. 主计时器逻辑（递归函数）

这是实现连续倒计时的核心。timer函数负责启动和管理单个倒计时，并在其完成后决定是启动下一个还是结束整个流程。

const timer = (timersArray, currentIndex) => {
  // 获取当前倒计时的数据
  thisTimer = timersArray[currentIndex];

  // 计算当前倒计时的总秒数
  maxSeconds = (parseInt(thisTimer.hour) * 3600) + 
               (parseInt(thisTimer.minute) * 60) + 
               parseInt(thisTimer.second);

  // 立即显示一次，避免1秒延迟，并立即递减
  displayTime(); 
  maxSeconds--; 

  // 启动计时器，每秒更新一次
  interval = setInterval(() => {
    displayTime(); // 更新显示
    maxSeconds--; // 秒数递减

    // 当当前倒计时结束时
    if (maxSeconds < 0) {
      clearInterval(interval); // 停止当前计时器

      // 检查是否还有下一个倒计时
      if (curTimer < timersArray.length - 1) {
        curTimer++; // 移动到下一个倒计时的索引
        timer(timersArray, curTimer); // 递归调用自身，启动下一个倒计时
      } else {
        // 所有倒计时都已完成
        output.innerHTML = "所有活动已结束！";
        // 可以在这里添加页面跳转逻辑，例如：
        // setTimeout(() => {
        //   window.location.href = "https://example.com/redirect";
        // }, 3000); // 3秒后跳转
      }
    }
  }, 1000); // 每1000毫秒（1秒）执行一次
};

// 页面加载完成后启动第一个倒计时
document.addEventListener('DOMContentLoaded', () => {
    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>连续倒计时教程</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            margin: 0; 
            background-color: #f4f4f4; 
        }
        .output { 
            font-size: 2em; 
            color: #333; 
            padding: 20px; 
            border: 2px solid #ccc; 
            border-radius: 8

登录后复制

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