js获取当前时间显示在页面上并每秒刷新

获取并显示当前时间是前端常见的需求之一。本文将提供一种基于JavaScript的实现方案，通过一个完整的示例演示如何实现“js获取当前时间显示在页面上并每秒刷新”。

方案概述

我们将使用JavaScript的Date对象获取当前时间，并将获取到的时间展示在网页上。为了实现每秒刷新，我们需要使用JavaScript中的定时器setInterval()函数。

具体来说，我们将执行以下步骤：

创建一个HTML页面。
编写JavaScript代码：获取当前时间，设置页面元素的innerHTML属性将时间显示在页面上，然后使用setInterval()函数设定每秒更新一次时间。

具体实现

第一步：创建HTML页面

我们先创建一个HTML页面，在其中添加一个空的div元素，用于显示当前时间：

<!DOCTYPE html>
<html>
<head>
    <title>显示当前时间</title>
    <script type="text/javascript" src="displayTime.js"></script>
</head>
<body>
    <div id="current-time"></div>
</body>
</html>

第二步：编写JavaScript代码

然后，我们创建一个JavaScript文件displayTime.js，编写以下代码：

function displayCurrentTime() {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    var timeString = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    document.getElementById("current-time").innerHTML = timeString;
}

setInterval(displayCurrentTime, 1000);

代码解释：

首先，我们定义了一个名为displayCurrentTime()的函数，用于获取当前时间并将其显示在HTML页面上。
在函数内部，我们首先使用Date对象获取当前时间（即var now = new Date()）。
然后，我们使用Date对象提供的各种方法（如getFullYear()、getMonth()等）获取当前时间的年、月、日、时、分、秒等信息。
最后，我们将获取到的时间信息拼接成字符串，赋值给页面元素的innerHTML属性，从而实现在网页上显示当前时间。
接着，我们使用setInterval()函数设定每秒刷新一次时间（即setInterval(displayCurrentTime, 1000)），从而实现页面实时更新时间的效果。

第三步：运行

运行HTML页面，可以看到页面中的div元素会实时显示当前时间，并且每秒钟刷新一次。

进一步优化

以上是最基础的实现方式。在实际应用中，我们还可以根据需求对页面样式、时间格式等进行更改。例如，我们可以使用CSS样式美化显示效果，使用JavaScript的toLocaleString()函数改变时间格式，等等。

样式美化

为div元素添加CSS样式可以美化页面效果。我们可以在HTML中添加样式代码：

<style type="text/css">
    #current-time {
        font-size: 24px;
        font-weight: bold;
        color: red;
    }
</style>

此代码将设置div元素的字体大小为24像素，粗体字体，颜色为红色。

时间格式化

JavaScript中提供了toLocaleString()方法，可以根据指定的语言和选项以本地化的格式返回日期和时间。

例如，我们更改代码如下所示，可以将时间格式改为“年月日时分秒”：

function displayCurrentTime() {
    var now = new Date();
    var timeString = now.toLocaleString('zh', {year: 'numeric', month: '2-digit', day: '2-digit', hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
    document.getElementById("current-time").innerHTML = timeString;
}

其中，zh表示中文，{year: 'numeric', month: '2-digit', day: '2-digit', hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'}指定了要显示的时间格式。

示例说明

这里提供两个示例，让大家更好地理解如何实现“js获取当前时间显示在页面上并每秒刷新”。

示例一：简单实现

请在页面上添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>显示当前时间</title>
    <script type="text/javascript">
        function displayCurrentTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var date = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var timeString = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
            document.getElementById("current-time").innerHTML = timeString;
        }

        setInterval(displayCurrentTime, 1000);
    </script>
</head>
<body>
    <div id="current-time"></div>
</body>
</html>

这段代码可以直接嵌入到HTML文件中，不必另外创建JavaScript文件。

示例二：优化显示效果

我们可以使用CSS样式美化页面效果，使用toLocaleString()方法改变时间格式。请在HTML文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>显示当前时间</title>
    <style type="text/css">
        #current-time {
            font-size: 24px;
            font-weight: bold;
            color: red;
        }
    </style>
    <script type="text/javascript">
        function displayCurrentTime() {
            var now = new Date();
            var timeString = now.toLocaleString('zh', {year: 'numeric', month: '2-digit', day: '2-digit', hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
            document.getElementById("current-time").innerHTML = timeString;
        }

        setInterval(displayCurrentTime, 1000);
    </script>
</head>
<body>
    <div id="current-time"></div>
</body>
</html>