iT邦幫忙

2025 iThome 鐵人賽

DAY 29
0

▍程式碼

<div id="sidebar-wrap">
        <div id="timer-display" class="shadow">⏱ 100:00</div> 
        <div id="question-navigator-wrap" class="card shadow-sm p-3">
            <h5 class="card-title text-center mb-3">題目概覽</h5>
            <div id="question-navigator" class="text-center">
            </div>
        </div>
    </div>
let timerInterval = null;
const TOTAL_TIME_MINUTES = 100;
const TOTAL_TIME_SECONDS = TOTAL_TIME_MINUTES * 60; // 100 分鐘
let timeRemaining = TOTAL_TIME_SECONDS; // 初始化剩餘時間

// 計時器
function formatTime(totalSeconds) {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

// 超時強制提交
function forceSubmit() {
    clearInterval(timerInterval); // 停止計時
    showAlert('時間到!測驗已強制交卷。');
    const submitButton = form.querySelector('button[type="submit"]');
    if (submitButton && !submitButton.disabled) {
        submitButton.click();
    }
}

// 開始計時
function startTimer() {
    const timerDisplay = document.getElementById('timer-display');
    
    if (timerInterval) {
        clearInterval(timerInterval);
    }

    timerDisplay.textContent = `⏱ ${formatTime(timeRemaining)}`;
    timerDisplay.classList.remove('alert-time');

    timerInterval = setInterval(() => {
        if (timeRemaining <= 0) {
            forceSubmit();
        } else {
            timeRemaining--;
            timerDisplay.textContent = `⏱ ${formatTime(timeRemaining)}`;
            
            // 最後10分鐘變為紅底
            if (timeRemaining <= 10 * 60) {
                timerDisplay.classList.add('alert-time');
            }
        }
    }, 1000); 
}

// 測驗提交停止計時
form.addEventListener('submit', async function(e) {
    ...
    if (timerInterval) {
        clearInterval(timerInterval); 
    }
    ...
});

// 頁面載入啟動計時器開始計時
document.addEventListener('DOMContentLoaded', () => {
    if (totalQuestions > 0) {
        startTimer(); 
    }
});

https://ithelp.ithome.com.tw/upload/images/20251013/20169370lpnbBvez73.png


上一篇
DAY28 - 測驗介面優化
下一篇
DAY30 - 歡迎頁面
系列文
打造你的數位圖書館:從雜亂檔案到個人化知識庫30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言