JavaScript动态时间显示：揭秘背后的秘密！

2022-12-19 22:34:01

JavaScript 时间的神奇之旅

欢迎来到 JavaScript 时间处理的奇妙世界，它为你打开了操作日期和时间的新天地。JavaScript 的强大功能让你可以轻松设置任何日期，动态显示当前时间，甚至探索更高级的时间操作技巧。

设置特定日期

JavaScript 提供了 Date 对象，它就像一张时间画布，允许你绘制任何日期。使用 setDate() 、setMonth() 和 setFullYear() 方法，你可以轻松指定日期、月份和年份。

const myDate = new Date();
myDate.setDate(15); // 设置日期为 15 号
myDate.setMonth(11); // 设置月份为 12 月（月份从 0 开始，11 代表 12 月）
myDate.setFullYear(2023); // 设置年份为 2023 年

使用时间戳

时间戳 是一个表示从 1970 年 1 月 1 日午夜到当前时刻的毫秒数的数字。通过 Date.now() ，你可以获取当前时间戳，或使用 new Date(timestamp) 创建一个指定时间戳的 Date 对象。

const timestamp = Date.now();
const myDate = new Date(timestamp);

动态显示当前时间

setInterval() 方法让你可以定时运行函数，实现动态更新时间的目的。它接受两个参数：第一个是需要执行的函数，第二个是执行间隔（以毫秒为单位）。

setInterval(() => {
  const myDate = new Date();
  console.log(myDate.toLocaleString());
}, 1000);

实时时钟

要创建一个实时时钟，你可以将 JavaScript 和 HTML 结合起来。创建一个 <span> 元素，将其 ID 设置为“clock”，然后使用 setInterval() 方法每秒更新此元素的内容。

<span id="clock"></span>

<script>
  setInterval(() => {
    const myDate = new Date();
    document.getElementById("clock").innerHTML = myDate.toLocaleString();
  }, 1000);
</script>