JS实现日期时间动态显示的方法

实现日期时间动态显示的方法可以使用JavaScript代码来实现，JavaScript 提供了一些可以使用的函数和对象，我们可以通过这些函数和对象来完成这一过程。

步骤一：获取日期时间对象

在JavaScript中获取日期时间对象可以使用内置对象 Date 。Date 对象同时包含了日期和时间，可以通过这个对象获取当前的日期时间。

var now = new Date();

以上代码将会创建一个当前日期时间的 Date 对象，其中 now 存储了这个对象。

步骤二：获取日期时间信息

我们可以使用 Date 对象提供的方法来获取日期时间信息，例如，可以获取年、月、日、时、分、秒等信息。

var year = now.getFullYear(); // 当前年份
var month = now.getMonth() + 1; // 月份从0开始，需要加1
var date = now.getDate(); // 当前日期
var hours = now.getHours(); // 当前小时
var minutes = now.getMinutes(); // 当前分钟
var seconds = now.getSeconds(); // 当前秒

以上代码中，每一个变量都存储着当前 Date 对象中对应的信息。

步骤三：动态更新网页内容

为了实现日期时间动态显示，我们需要将获取到的日期时间信息更新到网页中。

例如，我们可以在HTML文件中定义一个id为"datetime"的标签，在JavaScript中使用 document.getElementById 方法获取这个标签，并更新其内容。

<div id="datetime"></div>

var datetimeTag = document.getElementById("datetime");
datetimeTag.innerHTML = year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;

以上代码将获取到的年、月、日、时、分、秒等信息通过字符串拼接的方式更新到 id 为"datetime"的标签中。

示例一：每隔1秒自动更新页面上的日期时间

setInterval(function () {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var date = now.getDate();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var datetimeTag = document.getElementById("datetime");
  datetimeTag.innerHTML = year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
}, 1000);

以上代码中，使用 setInterval 函数每隔1秒更新一次网页中的日期时间信息。

示例二：点击按钮手动更新页面上的日期时间

<button id="btn-update-time">更新时间</button>
<div id="datetime"></div>

var btnTag = document.getElementById("btn-update-time");
var datetimeTag = document.getElementById("datetime");

function updateDatetime() {
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var date = now.getDate();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  datetimeTag.innerHTML = year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
}

btnTag.addEventListener("click", updateDatetime);

以上代码中，定义了一个“更新时间”的按钮，在点击按钮时手动更新网页中的日期时间信息。通过 addEventListener 函数为按钮添加了一个“click”事件，在点击按钮时执行 updateDatetime 函数。这个函数会获取当前日期时间信息，并更新到网页中。

阅读剩余 43%