PHP+HTML测验项目静态计时器重置问题求助

嘿，这个问题我之前做在线测验系统的时候也碰到过！页面重载导致计时器重置确实挺头疼的，毕竟用户体验会大打折扣。给你几个实用的解决方案，你可以根据自己的项目情况选：

这个方法能彻底避免页面刷新，计时器自然就不会重置了。思路是前端点击「下一题」时，用JS发送异步请求到PHP接口，获取新的题目和选项，然后动态更新页面内容，全程不刷新。

举个简单的实现示例：

前端HTML/JS部分 #

<!-- 题目展示区域 -->
<div id="question-container">
  <h3 id="question-text"><?php echo $currentQuestion['text']; ?></h3>
  <div id="options-container">
    <?php foreach($currentOptions as $opt): ?>
      <label><input type="radio" name="answer" value="<?php echo $opt['id']; ?>"> <?php echo $opt['text']; ?></label><br>
    <?php endforeach; ?>
  </div>
  <button id="next-btn">下一题</button>
</div>

<!-- 计时器 -->
<div id="timer">剩余时间：<span id="time-left">60</span>秒</div>

<script>
let timeLeft = <?php echo $timerDuration; ?>; // 从PHP获取初始计时时长
let timerInterval;

// 初始化计时器
function startTimer() {
  timerInterval = setInterval(() => {
    timeLeft--;
    document.getElementById('time-left').textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      // 超时跳转逻辑
      window.location.href = 'timeout.php';
    }
  }, 1000);
}

// 页面加载时启动计时器
window.onload = startTimer;

// 下一题按钮点击事件
document.getElementById('next-btn').addEventListener('click', () => {
  const selectedAnswer = document.querySelector('input[name="answer"]:checked');
  if (!selectedAnswer) {
    alert('请先选择一个答案！');
    return;
  }

  // 发送异步请求获取下一题
  fetch('get_next_question.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `current_qid=<?php echo $currentQuestion['id']; ?>&answer=${selectedAnswer.value}`
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      // 更新题目和选项
      document.getElementById('question-text').textContent = data.question.text;
      let optionsHtml = '';
      data.options.forEach(opt => {
        optionsHtml += `<label><input type="radio" name="answer" value="${opt.id}"> ${opt.text}</label><br>`;
      });
      document.getElementById('options-container').innerHTML = optionsHtml;
      // 如果每道题计时时长不同，可在这里更新timeLeft
      // timeLeft = data.new_timer;
    } else {
      // 无更多题目，跳转结果页
      window.location.href = 'result.php';
    }
  })
  .catch(err => console.error('加载题目失败:', err));
});
</script>

PHP接口get_next_question.php示例 #

<?php
session_start();
// 数据库连接（替换成你的配置）
$conn = mysqli_connect('localhost', 'your_username', 'your_password', 'quiz_db');

$currentQid = $_POST['current_qid'];
$userAnswer = $_POST['answer'];

// 可选：记录用户答案到数据库
// mysqli_query($conn, "INSERT INTO user_answers (user_id, question_id, answer_id) VALUES ('{$_SESSION['user_id']}', $currentQid, $userAnswer)");

// 获取下一题
$nextQQuery = mysqli_query($conn, "SELECT * FROM questions WHERE id > $currentQid ORDER BY id ASC LIMIT 1");
$nextQuestion = mysqli_fetch_assoc($nextQQuery);

if ($nextQuestion) {
  // 获取题目选项
  $optionsQuery = mysqli_query($conn, "SELECT * FROM options WHERE question_id = {$nextQuestion['id']}");
  $options = mysqli_fetch_all($optionsQuery, MYSQLI_ASSOC);
  
  echo json_encode([
    'success' => true,
    'question' => $nextQuestion,
    'options' => $options
    // 'new_timer' => 60 // 若每道题时长不同，可返回此字段
  ]);
} else {
  echo json_encode(['success' => false]);
}

mysqli_close($conn);
?>

如果因为项目限制必须刷新页面，那可以在跳转前把剩余时间存在localStorage或sessionStorage里，页面加载时读取这个值，继续计时。

示例代码：

<script>
let timeLeft;
let timerInterval;

window.onload = () => {
  // 从sessionStorage读取剩余时间（会话结束后自动清除），无则用默认值60
  timeLeft = parseInt(sessionStorage.getItem('quiz_timer')) || 60;
  document.getElementById('time-left').textContent = timeLeft;
  startTimer();
};

function startTimer() {
  timerInterval = setInterval(() => {
    timeLeft--;
    document.getElementById('time-left').textContent = timeLeft;
    // 实时保存剩余时间到sessionStorage
    sessionStorage.setItem('quiz_timer', timeLeft);
    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      sessionStorage.removeItem('quiz_timer');
      window.location.href = 'timeout.php';
    }
  }, 1000);
}

// 下一题跳转前确保状态保存
document.getElementById('next-btn').addEventListener('click', () => {
  sessionStorage.setItem('quiz_timer', timeLeft);
  // 提交表单或跳转页面
  document.getElementById('quiz-form').submit();
});

// 测验完成后清除存储
function finishQuiz() {
  sessionStorage.removeItem('quiz_timer');
  window.location.href = 'result.php';
}
</script>

如果需要严格控制计时、防止用户篡改前端时间，可以把剩余时间存在PHP Session里，前后端同步计时：

1. 页面加载时，后端将剩余时间写入Session并传给前端
2. 前端计时时，定期（比如每10秒）把剩余时间同步到后端更新Session
3. 点击下一题时，后端从Session读取剩余时间，处理后再返回给前端

这个方案适合对计时准确性要求高的场景，但需要处理前后端时间同步的细节问题。

总结一下，**方案1（AJAX异步加载）**是最优解，既保证了流畅的用户体验，又从根源上避免了页面刷新导致的状态丢失。如果项目有特殊需求必须刷新页面，再考虑方案2或3。

内容的提问来源于stack exchange，提问作者Mahesh Manjunath