JavaScript 將字符串時間正確傳入 Date 構造函數的實戰技巧

場景還原

頁面隱藏域 <input name="times" value="{$stime}"> 存放服務端輸出的時間字符串（如 2024-06-15 20:30:00）。前端需解析並計算倒計時。

常見錯誤

var a = document.timeForm.times.value; // 取得字符串
var urodz = new Date("a");             // 錯誤：傳入字面量 "a" 而非變量 a

new Date("a") 會嘗試解析字面量 "a"，導致 Invalid Date。

正確寫法

var a = document.timeForm.times.value.trim(); // 去除首尾空白
var urodz = new Date(a);                      // 直接傳變量
// 或兼容舊瀏覽器：new Date(a.replace(/-/g, '/'))

倒計時邏輯優化

• 使用 setInterval 每秒更新，避免 250ms 高頻觸發導致 UI 卡頓；
• 統一用 Math.floor 取整天/時/分，秒用 Math.round 或直接取餘；
• 異步獲取服務端時間（AJAX）同步本地時鐘，防止客戶端時間被篡改。

完整示例

function startCountdown(targetStr) {
    var target = new Date(targetStr.replace(/-/g, '/'));
    var timer = setInterval(function() {
        var now = new Date();
        var diff = target - now;
        if (diff <= 0) { clearInterval(timer); return; }
        var d = Math.floor(diff / 864e5);
        var h = Math.floor((diff % 864e5) / 36e5);
        var m = Math.floor((diff % 36e5) / 6e4);
        var s = Math.floor((diff % 6e4) / 1e3);
        document.getElementById('date').textContent = d;
        document.getElementById('time').textContent = h + '時' + m + '分' + s + '秒';
    }, 1000);
}
// 用法
startCountdown(document.timeForm.times.value);

關鍵點總結

1. 變量而非字面量：new Date(a) 而非 new Date("a")；
2. 格式兼容：Safari/舊 IE 不支援 YYYY-MM-DD，建議 replace(/-/g, '/') 或用 Date.parse；
3. 時區一致：服務端輸出最好帶時區（ISO 8601），前端直接 new Date(isoStr) 最穩健。