javascript实现实时输出当前的时间

下面是详细讲解如何用JavaScript实现实时输出当前时间的攻略。

步骤一：获取当前时间

JavaScript内置了Date对象，可以通过该对象的各种方法获取当前系统时间。其中，可以使用new Date()方法创建一个Date对象，该对象可以返回包含当前日期和时间的Date对象。例如：

let now = new Date();

这将创建一个表示当前日期和时间的Date对象。现在，我们可以使用这个对象获取当前日期和时间的年、月、日、小时、分钟和秒。例如：

let year = now.getFullYear();  // 获取当前年份
let month = now.getMonth() + 1;  // 获取当前月份，需要加1，因为getMonth()返回0-11
let day = now.getDate();  // 获取当前日
let hour = now.getHours();  // 获取当前小时
let minute = now.getMinutes();  // 获取当前分钟
let second = now.getSeconds();  // 获取当前秒

步骤二：格式化时间

获取到日期和时间后，我们需要将它们格式化为可读性更强的方式。你可以手动按照你想要的格式编写代码，也可以使用现成的第三方库，例如Moment.js。

手动编写代码示例：

let monthStr = month < 10 ? `0${month}` : month; // 格式化月份，补齐前导0
let dayStr = day < 10 ? `0${day}` : day; // 格式化日，补齐前导0
let hourStr = hour < 10 ? `0${hour}` : hour; // 格式化小时，补齐前导0
let minuteStr = minute < 10 ? `0${minute}` : minute; // 格式化分钟，补齐前导0
let secondStr = second < 10 ? `0${second}` : second; // 格式化秒，补齐前导0

let time = `${year}-${monthStr}-${dayStr} ${hourStr}:${minuteStr}:${secondStr}`; // 时间格式化为 'YYYY-MM-DD HH:mm:ss' 形式

注意，在这个示例中，如果月份、日、小时、分钟、秒的值小于10，则补齐前导0，使它们都以两位数的形式呈现。

Moment.js示例：

Moment.js是一种流行的JavaScript库，专门用于处理日期和时间。它提供了丰富的处理方式，可以方便地格式化时间。

使用Moment.js库，我们可以按照如下方式格式化时间：

let time = moment(now).format('YYYY-MM-DD HH:mm:ss'); // 时间格式化为 'YYYY-MM-DD HH:mm:ss' 形式

这将返回一个字符串，其中包含格式化后的日期和时间。

步骤三：实时输出时间

最后一步是实时输出当前时间。我们可以使用setInterval()方法来实现定时输出。如下代码实现了每秒输出当前时间，并将其更新为网页中ID为“time”的元素中的文本内容。

let timeEle = document.getElementById('time'); // 获取元素
setInterval(() => {
  let time = moment(now).format('YYYY-MM-DD HH:mm:ss');
  timeEle.innerText = time; // 设置元素内容
}, 1000); // 每隔1秒刷新一次

这段代码使用setInterval()方法设置了一个定时器，它每隔1秒就会执行一次回调函数。回调函数获取当前时间并格式化它，然后将其赋值给页面上ID为“time”的元素。

这样，页面上的时间就可以不断更新了。

阅读剩余 27%