使用JavaScript實時顯示當前時間

一、獲取當前時間

在JavaScript中獲取當前時間的方法很簡單，使用JavaScript內置的Date對象即可。Date對象的now()方法可以返回當前時間的毫秒數，再通過生成一個新的時間對象，即可獲取當前時間。

    const currentDate = new Date();
    const currentHour = currentDate.getHours();
    const currentMinute = currentDate.getMinutes();
    const currentSecond = currentDate.getSeconds();

上述代碼中，我們生成了一個新的Date對象，並獲取了當前的小時數、分鐘數和秒數。這些值都是整數類型，可以直接用於顯示當前時間。

二、格式化時間輸出

獲取到當前時間後，我們還需要進行格式化以便輸出正確的時間格式。下面是一個將時間格式化為HH:MM:SS的函數：

    function formatTime(hour, minute, second) {
        const formattedHour = addLeadingZero(hour);
        const formattedMinute = addLeadingZero(minute);
        const formattedSecond = addLeadingZero(second);
        return `${formattedHour}:${formattedMinute}:${formattedSecond}`;
    }

    function addLeadingZero(time) {
        return time < 10 ? `0${time}` : time;
    }

上述代碼中，我們編寫了兩個函數：formatTime和addLeadingZero，用於將時間格式化為HH:MM:SS格式。其中，addLeadingZero用於在小時、分鐘和秒數小於10時，在前面補0。

三、更新時間

在頁面中顯示實時時間，需要將JavaScript代碼與HTML代碼結合起來。我們可以將時間顯示在一個HTML元素中，例如：

    <div id="time"></div>

然後，每秒更新一次時間：

    setInterval(function() {
        const currentDate = new Date();
        const currentHour = currentDate.getHours();
        const currentMinute = currentDate.getMinutes();
        const currentSecond = currentDate.getSeconds();
        document.getElementById('time').innerHTML = formatTime(currentHour, currentMinute, currentSecond);
    }, 1000);

上述代碼中，我們使用了JavaScript內置的setInterval函數，每1000毫秒更新一次時間。同時，我們獲取了當前的小時數、分鐘數和秒數，並使用formatTime函數將時間格式化為HH:MM:SS的格式。最後，我們在HTML元素中更新了實時時間。

四、完整代碼示例

下面是完整的代碼示例：

    <div id="time"></div>

    <script>
        function formatTime(hour, minute, second) {
            const formattedHour = addLeadingZero(hour);
            const formattedMinute = addLeadingZero(minute);
            const formattedSecond = addLeadingZero(second);
            return `${formattedHour}:${formattedMinute}:${formattedSecond}`;
        }

        function addLeadingZero(time) {
            return time < 10 ? `0${time}` : time;
        }

        setInterval(function() {
            const currentDate = new Date();
            const currentHour = currentDate.getHours();
            const currentMinute = currentDate.getMinutes();
            const currentSecond = currentDate.getSeconds();
            document.getElementById('time').innerHTML = formatTime(currentHour, currentMinute, currentSecond);
        }, 1000);
    </script>

五、總結

通過上述代碼示例，我們可以實現使用JavaScript顯示實時時間的功能。要注意時間的格式化以及每秒更新時間的邏輯。這個功能可以應用於Web應用程序的多個場景，例如展示當前比賽或活動的開賽時間。