原生JS:Date对象全面解析

什么是Date对象

Date 对象是 JavaScript 中的内置对象，用于处理日期和时间。可以使用 new 关键字实例化一个 Date 对象。

var now = new Date();

上述代码会返回一个 Date 对象，表示当前的日期和时间。

Date对象的方法和属性

获取年份，月份和日期

Date 对象提供了获取其表示日期和时间的各个部分的方法，如下所示：

var now = new Date();
var year = now.getFullYear(); // 获取年份，例如：2022
var month = now.getMonth() + 1; // 获取月份，返回值为0-11，需要+1才是实际月份
var date = now.getDate(); // 获取日期，例如：23

获取时间

要获取 Date 对象表示的时间，可以使用以下方法：

var now = new Date();
var hours = now.getHours(); // 获取小时数，例如：10
var minutes = now.getMinutes(); // 获取分钟数，例如：45
var seconds = now.getSeconds(); // 获取秒数，例如：30

格式化日期和时间

日期和时间的格式化是一个常见的需求，可以使用以下方法进行格式化：

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 formatDate = year + "-" + (month < 10 ? "0" + month : month) + "-" + (date < 10 ? "0" + date : date);
// 格式化时间
var formatTime = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);

console.log(formatDate); // 输出：2022-08-23
console.log(formatTime); // 输出：10:45:30

时间戳

时间戳是指从 1970 年 1 月 1 日 00:00:00 UTC 开始到指定日期时间的毫秒数。可以使用以下方法获取指定日期时间的时间戳：

var now = new Date();
var timestamp = now.getTime();
console.log(timestamp); // 输出 1660475207143

示例：倒计时

以下代码可以实现一个简单的倒计时效果：

<div id="countdown"></div>

<script>
  var countdownElement = document.getElementById("countdown");
  var deadline = new Date("2022/09/01");

  function updateCountdown() {
    var now = new Date();
    var remainingTime = deadline.getTime() - now.getTime();

    var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
    var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

    countdownElement.innerHTML = "倒计时：" + days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";

    if (remainingTime <= 0) {
      clearInterval(countdownInterval);
      countdownElement.innerHTML = "倒计时已结束！";
    }
  }

  updateCountdown();

  var countdownInterval = setInterval(updateCountdown, 1000);
</script>

上述代码会在页面中显示一个倒计时，直到指定时间结束。在代码中，setInterval 方法每隔一秒执行一次 updateCountdown 函数，从而更新倒计时的显示。