JavaScript 定時在指定區域輸出隨機數：setInterval + DOM 更新完整範例

需求：頁面指定區域每 10 分鐘輸出一個 7 位隨機整數，不影響其他內容。

核心實現

<div id="random-number"></div>

<script>
// 產生指定位數的隨機整數（首位不為 0）
function generateRandomNum(digits) {
    let num = '';
    for (let i = 0; i < digits; i++) {
        const min = i === 0 ? 1 : 0;
        const max = 9;
        num += Math.floor(Math.random() * (max - min + 1) + min);
    }
    return num;
}

// 更新 DOM
function updateRandomNumber() {
    const el = document.getElementById('random-number');
    if (el) el.textContent = generateRandomNum(7);
}

// 每 10 分鐘執行一次 (10 * 60 * 1000 ms)
const timerId = setInterval(updateRandomNumber, 10 * 60 * 1000);

// 頁面卸載時清除定時器（防洩漏）
window.addEventListener('beforeunload', () => clearInterval(timerId));
</script>

關鍵點解析

1. 鎖定目標容器：`
   ` 作為掛載點，`document.getElementById` 精準選取，不污染全域。
2. 使用 `textContent` 而非 `innerHTML`：純文字更新，避免 XSS 風險，效能更好。
3. 首位非零邏輯：`i === 0 ? 1 : 0` 確保生成真正的 7 位數（1000000-9999999）。
4. 清除定時器：`beforeunload` 移除 `setInterval`，防止單頁應用切換路由後定時器殘留。

進階：可見區域才更新（IntersectionObserver）

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            updateRandomNumber(); // 進入視口時立即更新
        }
    });
});
observer.observe(document.getElementById('random-number'));

避坑指南

• ❌ `document.write` 會覆蓋整個頁面。
• ❌ `innerHTML` 插入未轉義字串導致 XSS。
• ❌ 忘記 `clearInterval` 導致記憶體洩漏與多重觸發。
• ✅ 使用 `const`/`let`、模組化函式、錯誤邊界處理。

此模式適用於驗證碼倒數、股價輪詢、公告輪播等「定時局部更新」場景。