《JS新手转熟练之道》七章：踏入JS世界，书写精彩代码！

JavaScript 从入门到精通：日期和时间管理指南

在踏上编程之旅时，掌握 JavaScript 的日期和时间处理功能至关重要。JavaScript 提供了强大的工具，使开发人员能够轻松操作日期和时间，创建交互式应用程序和动态网站。

一、时间对象 (Date)

JavaScript 的时间对象是一个内置对象，可用于表示和操作日期和时间。它包含了许多属性和方法，可用于获取和设置日期、时间和毫秒数。

如何创建时间对象：

• new Date(): 创建一个表示当前日期和时间的对象。
• new Date(milliseconds): 使用毫秒数创建对象。
• new Date(dateString): 使用日期字符串创建对象。
• new Date(year, month, day, hours, minutes, seconds, milliseconds): 使用特定日期和时间值创建对象。

属性和方法：

• 属性：
  • Date.now(): 返回当前时间戳（毫秒）。
  • Date.prototype.getDate(): 返回日期中的日期（1-31）。
  • Date.prototype.getMonth(): 返回月份中的月份（0-11）。
  • Date.prototype.getFullYear(): 返回年份中的年份。
  • Date.prototype.getHours(): 返回小时中的小时（0-23）。
  • Date.prototype.getMinutes(): 返回分钟中的分钟（0-59）。
  • Date.prototype.getSeconds(): 返回秒中的秒（0-59）。
• 方法：
  • Date.prototype.setDate(): 设置日期中的日期（1-31）。
  • Date.prototype.setMonth(): 设置月份中的月份（0-11）。
  • Date.prototype.setFullYear(): 设置年份中的年份。
  • Date.prototype.setHours(): 设置小时中的小时（0-23）。
  • Date.prototype.setMinutes(): 设置分钟中的分钟（0-59）。
  • Date.prototype.setSeconds(): 设置秒中的秒（0-59）。

二、时钟案例

代码：

CSS：

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

#clock {
    font-size: 50px;
    margin: 50px;
}

JavaScript：

const clock = document.getElementById("clock");

function updateClock() {
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    const timeString = `${hours}:${minutes}:${seconds}`;
    clock.textContent = timeString;
}

setInterval(updateClock, 1000);

三、定时器

JavaScript 提供了两个定时器函数：setTimeout() 和 setInterval()。

• setTimeout(callback, delay) : 在指定延迟 (毫秒) 后执行回调函数一次。
• setInterval(callback, interval) : 每隔指定时间间隔 (毫秒) 执行回调函数，直到调用 clearInterval() 停止。

定时器在 JavaScript 应用程序中广泛用于实现各种交互性，例如轮播图、动画和倒计时。

总结

掌握 JavaScript 的日期和时间处理功能对于编写交互式和动态的 Web 应用程序至关重要。通过利用时间对象和定时器，开发人员可以轻松操作日期和时间值，创建引人入胜的用户体验。

常见问题解答：

1. 如何获取当前时间戳？

   • 使用 Date.now() 属性。

2. 如何设置日期？

   • 使用 Date.prototype.setDate() 方法。

3. 如何停止 setInterval() 定时器？

   • 调用 clearInterval() 函数。

4. setTimeout() 和 setInterval() 的区别是什么？

   • setTimeout() 在指定延迟后执行回调一次，而 setInterval() 每隔指定时间间隔执行回调。

5. 如何在 JavaScript 中创建倒计时？

   • 使用 setInterval() 并在每个间隔中减少剩余时间，直到达到零。