JavaScript 實現帶陰影效果的數位時鐘

程式碼實作

本範例展示如何使用 JavaScript 與 CSS 絕對定位，建立一個具有立體陰影效果的數位時鐘。雖然標題提到 Java，但實際程式碼為 JavaScript（原始資料標記為 language=javaScript）。

HTML 結構與樣式

<div id="bgclockshade" style="position:absolute; visibility:visible; font-family:'Arial black'; color:#cccccc; font-size:20px; top:50px; left:173px"></div>
<div id="bgclocknoshade" style="position:absolute; visibility:visible; font-family:'Arial black'; color:#000000; font-size:20px; top:48px; left:170px"></div>
<div id="mainbody" style="position:absolute; visibility:visible"></div>

兩個 <div> 重疊顯示相同時刻，透過 2 像素的位移與顏色差異（灰色 #cccccc 與黑色 #000000）產生陰影立體感。

JavaScript 核心邏輯

<script language="javascript">
<!--
function updateClock() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    // 補零處理
    hours = (hours < 10) ? "0" + hours : hours;
    minutes = (minutes < 10) ? "0" + minutes : minutes;
    seconds = (seconds < 10) ? "0" + seconds : seconds;

    var timeStr = hours + ":" + minutes + ":" + seconds;

    // IE (document.all) 寫法
    if (document.all) {
        bgclocknoshade.innerHTML = timeStr;
        bgclockshade.innerHTML = timeStr;
    }
    // Netscape 4 (document.layers) 寫法
    if (document.layers) {
        document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute; visibility:visible; font-family:Verdana; color:#FFAAAA; font-size:20px; top:10px; left:152px">' + timeStr + '</div>');
        document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute; visibility:visible; font-family:Verdana; color:#DDDDDD; font-size:20px; top:8px; left:150px">' + timeStr + '</div>');
        document.close();
    }

    setTimeout("updateClock()", 200);
}
updateClock();
// -->
</script>

技術解析

瀏覽器相容性處理

• IE 4+：使用 document.all 集合與 innerHTML 直接更新元素內容
• Netscape Navigator 4：使用 document.layers 與 document.write() 動態重寫圖層內容

現代瀏覽器（Chrome、Firefox、Edge 等）皆支援 document.getElementById() 與 textContent，建議重寫為標準 DOM API。

定時更新機制

使用 setTimeout 每 200 毫秒遞迴呼叫自身，實現近似即時的時鐘更新。注意遞迴呼叫時函數名稱需一致（原始碼中 www_ddvip_com 與 www_ddvip_net 不一致，已修正）。

現代化改寫建議

// 現代標準寫法
const shadeEl = document.getElementById('bgclockshade');
const mainEl = document.getElementById('bgclocknoshade');

function updateClock() {
    const now = new Date();
    const timeStr = now.toLocaleTimeString('zh-TW', { hour12: false });
    shadeEl.textContent = timeStr;
    mainEl.textContent = timeStr;
}
setInterval(updateClock, 200);
updateClock();

此版本移除瀏覽器判斷，使用 toLocaleTimeString 自動處理補零與格式化，並改用 setInterval 避免遞迴呼叫堆疊風險。