测验计时器切换题目重置问题：实现持续计时至最后一题或超时跳转

问题核心是页面刷新时JS变量会重新初始化——切换题目如果依赖页面刷新，seconds每次都会被重置为60，计时器自然跟着归零。要实现持续计时，需要把剩余时间存在浏览器的会话存储中，页面刷新时读取这个值继续计时。

修改后的JavaScript代码 #

<script>
    // 从sessionStorage读取剩余时间，无初始值则设为60秒
    var seconds = parseInt(sessionStorage.getItem('quizRemainingSeconds')) || 60;
    
    function secondPassed() {
        var minutes = Math.floor(seconds / 60); // 修正原计算逻辑的误差
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds; 
        }
        document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
        
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Time Out";
            alert("You're out of time!");
            // 超时后清除存储的时间，避免下次进入残留
            sessionStorage.removeItem('quizRemainingSeconds');
            window.location.href = "index.php";
        } else {    
            seconds--;
            // 每次更新剩余时间后存入sessionStorage
            sessionStorage.setItem('quizRemainingSeconds', seconds);
        }
    }
    
    var countdownTimer = setInterval(secondPassed, 1000); // 直接传函数引用更安全
    
    // 若有测验提交按钮，需添加清除存储的逻辑（示例）
    // document.getElementById('submit-btn').addEventListener('click', function() {
    //     sessionStorage.removeItem('quizRemainingSeconds');
    // });
</script>

关键改动说明 #

• 用sessionStorage持久化剩余时间：页面刷新时会读取存储值，而非重新初始化60秒。
• 修正分钟计算错误：原Math.round((seconds - 30)/60)会导致剩余60秒时显示0分钟，改用Math.floor(seconds / 60)更准确。
• 超时或完成测验时清除存储：避免下次进入测验时沿用之前的剩余时间。

HTML部分无需修改 #

<h4 style="color:#FF0000;position:absolute;left:70%;top:30%;" align="center" >
    <span id="iTimeShow">Time Remaining: </span><br/>
    <span id='countdown' style="font-size:25px;"></span>
</h4>

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