JavaScript实时显示当前时间

JavaScript主要使用DateDate中的getMonth()方法返回值从0开始计数，获取日期需要使用getDate()方法，而不是getDay()方法。如果要实时获取时间，则需要使用Date结合定时器实现，下面介绍两种实现方法。使用和setTimeout都可以实时获取当前时间，如果你对递归深恶痛绝的话，那还是推荐使用，毕竟看起来更加简单直观。

HerryDong

16688人浏览 · 2019-12-13 16:46:21

HerryDong · 2019-12-13 16:46:21 发布

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>