PHP 與 JavaScript 打造 LCD 風格數位時鐘

專案簡介

這是一個結合 PHP 伺服端參數與 JavaScript 客戶端動態渲染的 LCD 風格數位時鐘。PHP 負責輸出時鐘外觀參數（段寬、段長、間距、顏色），JavaScript 以 7 段顯示器邏輯每 200ms 更新一次時間，呈現類似電子錶的視覺效果。

核心架構

PHP 端：參數化輸出

<?php
$size_small = 5;   // 段寬
$size_big   = 25;  // 段長
$distance   = 10;  // 數字間距
$color_back = '#DDDDDD';
$color_dark = '#CCCCCC'; // 未點亮段色
$color_light= '#000000'; // 點亮段色
?>

這些變數直接嵌入 JavaScript 與 HTML 表格結構中，實現「配置即代碼」。

JavaScript 端：7 段顯示邏輯

每個數字由 7 個可獨立控制的段組成（編號 0-6），change(number, timer) 函式依據傳入數字 0-9，呼叫 swapcolor() 切換對應段的背景色。

function swapcolor(obj, onoff) {
    obj.style.background = onoff ? '<?php echo $color_light; ?>' : '<?php echo $color_dark; ?>';
}

function change(number, timer) {
    switch (timer) {
        case 0: swapcolor(eval('time'+number+'0'),1); ... break;
        case 1: swapcolor(eval('time'+number+'0'),0); ... break;
        // ... 2-9 共 10 種模式
    }
}

注意：使用 eval() 存取 DOM 元素屬於早期寫法，現代建議改用 document.getElementById() 或預先建立元素陣列。

時間驅動與 DOM 產生

show() 函式每 200ms 執行一次：取得當前時分秒，拆解為十位與個位共 6 個數字，呼叫 change() 更新顯示。

PHP 以巢狀迴圈輸出 6 組 3x5 表格結構，每組包含 7 個 <div id="timeXY"> 對應 7 段，編號規則為 time{數字索引}{段索引}。第 2、4 個數字（分隔符）額外插入冒號用的小方塊。

完整頁面結構

<html><head><title>Timer</title>
<script>... 7段邏輯與 show() ...</script>
</head>
<body bgcolor="<?php echo $color_back; ?>">
<?php
// 輸出 6 組 7段顯示器表格結構
for ($number=0; $number<6; $number++) {
    // 輸出 5 行 x 3 列的表格，每個儲存格對應一段
    // 中間插入冒號分隔符
}
?>
<script>show();</script> // 啟動計時器
</body></html>

優化與現代化建議

• 移除 eval()：改用 document.querySelectorAll('[id^="time"]') 建立元素映射表。
• CSS 替代表格佈局：使用 Flexbox/Grid 佈局 7 段，並以 CSS 變數控制顏色尺寸。
• requestAnimationFrame：替代 setTimeout，獲得更平滑的更新。
• Web Components：封裝為 <lcd-clock> 自定義元素，屬性化配置尺寸顏色。

總結

此專案展示了 PHP 作為模板引擎輸出動態 JavaScript 配置的經典模式。雖然 DOM 操作手法已過時，但「伺服端參數化、客戶端狀態機渲染」的分工思想在現代前端框架（如 React Props + State）中依然通用。