使用JavaScript实时显示当前时间

GDJQY • 2025-04-22 01:14 • 编程

一、获取当前时间

在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应用程序的多个场景，例如展示当前比赛或活动的开赛时间。

原创文章，作者：GDJQY，如若转载，请注明出处：https://www.506064.com/n/370501.html