JavaScript 實時時鐘：setInterval + Date 對象實現動態顯示與停止控制

需求：文本框每秒更新當前時間，提供「Stop」按鈕停止更新。核心知識點：setInterval、clearInterval、Date.toLocaleTimeString()。

完整可運行代碼

<html>
<body>
<input type="text" id="clock" readonly>
<script>
    var timer = setInterval(function() {
        var d = new Date();
        document.getElementById("clock").value = d.toLocaleTimeString();
    }, 1000);

    // 停止按鈕
    document.write('<button onclick="clearInterval(timer)">Stop</button>');
</script>
</body>
</html>

關鍵細節

• setInterval 返回的 ID 必須保存在變量（timer）中，供 clearInterval 使用
• toLocaleTimeString() 自動適配瀏覽器語言環境，格式如「下午 3:25:10」
• 輸入框加 readonly 防止用戶手動修改

擴展：自定義格式（如 HH:mm:ss）

function formatTime(d) {
    return [d.getHours(), d.getMinutes(), d.getSeconds()]
        .map(v => v < 10 ? '0' + v : v).join(':');
}