核心需求
- 顯示時分秒實時倒計時。
- 以伺服器時間為準,防止用戶修改本地時間作弊(如考試系統)。
解決思路
- 倒計時邏輯由 JavaScript 前端執行(避免每秒 AJAX 請求)。
- PHP 僅在頁面載入時輸出「伺服器時間與客戶端時間的差值」(毫秒),JS 捕獲後校準本地計時器。
- 理論同步,實測誤差約 1 秒(網路延遲),滿足大多數場景。
方案一:基本版(固定活動時段)
<?php
date_default_timezone_set("Asia/Hong_Kong");
$start = strtotime("09:00:00");
$end = strtotime("18:30:00");
$now = time();
$left = $end - $now; // 剩餘秒數
?>
<script>
var serverDiff = <?= $left * 1000 ?> - (Date.now() - <?= $now * 1000 ?>);
// JS 端使用 serverDiff 校準倒計時
</script>
方案二:修正 Bug 版(同上,原文重複)
方案三:增加未開始/已結束判斷
<?php
date_default_timezone_set("Asia/Hong_Kong");
$start = strtotime("09:00:00");
$end = strtotime("13:50:00");
$now = time();
if ($now < $start) die("活動未開始,時間:09:00-13:50");
$left = $end - $now;
?>
前端 JS 骨架(需自行實現)
function startCountdown(endTimestamp, serverDiff) {
var timer = setInterval(function() {
var now = Date.now() + serverDiff;
var diff = endTimestamp - now;
if (diff <= 0) { clearInterval(timer); return; }
var h = Math.floor(diff/3600000);
var m = Math.floor((diff%3600000)/60000);
var s = Math.floor((diff%60000)/1000);
document.getElementById('countdown').innerText = h+':'+m+':'+s;
}, 1000);
}
原文僅提供 PHP 端輸出剩餘秒數,完整方案需配合前端 JS 實現實時更新。