如何使用 JavaScript 实现基于倒计时的题库逐条自动切换-php教程-PHP中文网

如何使用 JavaScript 实现基于倒计时的题库逐条自动切换

本文介绍如何将 php 查询的题库数据转为 json 供前端使用，并通过 javascript 定时器驱动倒计时与题目自动轮播，实现「每题显示固定秒数后自动跳转下一条」的交互效果。

本文介绍如何将 php 查询的题库数据转为 json 供前端使用，并通过 javascript 定时器驱动倒计时与题目自动轮播，实现「每题显示固定秒数后自动跳转下一条」的交互效果。

在构建在线测验、答题系统或教学展示页面时，常需按预设时间（如每题 15 秒）自动切换题目。直接在 PHP 中循环输出全部 <div> 元素会导致所有题目一次性渲染、无法动态控制显示逻辑；而纯前端定时切换又缺乏原始数据支撑。最佳实践是：<strong>服务端一次性提供结构化数据，前端用 JavaScript 驱动状态流转</strong>。<h3>✅ 推荐实现方案：PHP + JSON + setInterval（优化版）</h3> <p>首先，PHP 层应避免逐行 <code>echo 多个 .area 容器，而是统一获取全部题库并编码为 JSON，注入到页面脚本中：

<?php $mysqli = new mysqli("localhost", "root", "", "learningbydoing");
$result = $mysqli->query("SELECT id, no AS number, question, time FROM question");
$questions = $result->fetch_all(MYSQLI_ASSOC);
$json = json_encode($questions, JSON_UNESCAPED_UNICODE);
?>
<script>const QUESTIONS = <?= $json ?>;</script>

⚠️ 注意：确保数据库字段名与前端逻辑一致（如示例中使用 id 和 time），且 JSON_UNESCAPED_UNICODE 可正确处理中文题干。

接着，HTML 结构精简为单个容器，便于 JS 动态更新内容：

<div class="area">
  <div class="boxquestion">
    <label id="q-number"></label><br><label id="q-text"></label><br><label id="countdowntimer">0</label><br>
</div>
</div>

CSS 保持原有约束（height: 100%; overflow: hidden;），确保每次仅显示当前题目：

OpenJDK 24

下载

.area {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boxquestion {
  text-align: center;
  padding: 2rem;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

? 核心 JavaScript 逻辑（清晰可维护）

我们改用现代、易读的 setInterval + 状态管理方式替代递归 setTimeout，避免作用域混乱与内存隐患：

document.addEventListener('DOMContentLoaded', () => {
  const elNumber = document.getElementById('q-number');
  const elText   = document.getElementById('q-text');
  const elTimer  = document.getElementById('countdowntimer');

  if (!QUESTIONS || QUESTIONS.length === 0) {
    elText.textContent = '暂无题目';
    return;
  }

  let currentIndex = 0;
  let remainingTime = QUESTIONS[0].time;
  let timerId = null;

  // 渲染当前题目
  const renderQuestion = (index) => {
    const q = QUESTIONS[index];
    elNumber.textContent = q.number || q.id;
    elText.textContent   = q.question;
    remainingTime        = parseInt(q.time, 10) || 0;
    elTimer.textContent  = remainingTime;
  };

  // 启动倒计时
  const startCountdown = () => {
    timerId = setInterval(() => {
      remainingTime--;
      elTimer.textContent = remainingTime;

      if (remainingTime = QUESTIONS.length) {
          elNumber.textContent = '✅';
          elText.textContent   = '全部完成！';
          elTimer.textContent  = '';
          return;
        }

        renderQuestion(currentIndex);
        startCountdown(); // 重启新题倒计时
      }
    }, 1000);
  };

  // 初始化并启动
  renderQuestion(0);
  startCountdown();
});