JavaScript实时显示当前时间

HerryDong

已于 2024-04-25 11:20:39 修改

阅读量1.7w

点赞数 10

分类专栏： JavaScript 文章标签： javascript

于 2019-12-13 16:46:21 首次发布

本文链接：https://blog.csdn.net/HerryDong/article/details/103530019

版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了两种使用JavaScript实现实时显示当前时间的方法：一种是利用setInterval定时器每隔1000毫秒更新时间；另一种是使用setTimeout进行递归调用来达到相同效果。通过这两种方法，可以确保网页上的时间始终保持最新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前言

JavaScript主要使用Date获取当前时间，需要注意的是：Date中的getMonth()方法返回值从0开始计数，获取日期需要使用getDate()方法，而不是getDay()方法。如果要实时获取时间，则需要使用Date结合定时器实现，下面介绍两种实现方法。

2、方法一：setInterval

setInterval表示每隔一定时间执行一次任务，如果要实时显示当前时间，只需要每隔1000毫秒获取一次当前时间即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时显示当前时间</title>
</head>
<body>
    <div id="time"></div>
    <script>
         function getTime() {
            var date = new Date();

            // 年、月、日
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();

            // 时、分、秒
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();

            // 实时显示
            var element = document.getElementById('time');
            element.innerHTML = '<h1>' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        }
        setInterval('getTime()', 1000);
    </script>
</body>
</html>

运行结果如下图：

在这里插入图片描述

3、方法二：setTimeout

也可以考虑使用setTimeout定时器来实现。setTimeout表示推迟一定时间后执行一次任务，此时对其进行递归调用即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时显示当前时间</title>
</head>
<body>
    <div id="time"></div>
    <script>
        function getTime() {
            var date = new Date();

            // 年、月、日
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();

            // 时、分、秒
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();

            // 实时显示
            var element = document.getElementById('time');
            element.innerHTML = '<h1>' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        }

        // 递归
        function showTime() {
            getTime();
            setTimeout('showTime()', 1000);
        }

        // 执行
        showTime();
    </script>
</body>
</html>