引言

Date 对象用于处理日期和时间。

常用方法

let date = new Date();
    date.getFullYear();  // 获取年份
    date.getMonth();   //获取当前年的月份 月份要 + 1 （0代表1月）date.getMonth() + 1
    date.getDate();    //获取当前日（1 - 31）
    date.getDay();     //获取当前星期几（0-6, 0为星期日）
    date.getHours();   //获取当前小时（0-23）
    date.getMinutes(); //获取当前分钟（0-59）
    date.getSeconds(); //获取当前秒数（0-59）
    date.getMilliseconds(); //获取当前毫秒数（0-999）
    date.getTime();  //获取当前时间，是个时间戳 从1970年到现在时间的毫秒数
    // 获取时间戳
    Date.parse(new Date());   // 结果：1636525349000   不精准 毫秒改成了000显示 
    date.valueOf();  // 结果： 1636525405310  精准	
    date.getTime();  // 结果：1636525405310  精准

将字符串形式的日期转换为日期对象

new Date(Date.parse('2021-11-11 11:11:11'.replace(/-/g,"/")));  // Thu Nov 11 2021 11:11:11 GMT+0800 (中国标准时间)

将日期对象转换为字符串形式日期

    function zero(v) {
      return (v < 10 ? '0' : '') + v;
    };
    function formatDateTime(date) {
      let y = date.getFullYear(),
        m = zero(date.getMonth() + 1),
        d = zero(date.getDate()),
        h = zero(date.getHours()),
        minute = zero(date.getMinutes()),
        second = zero(date.getSeconds());
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
    }
    formatDateTime(new Date()); // 2021-11-10 14:45:45

时间戳转为字符串日期格式

    function formatDateTime(time, format) {
      let t = new Date(time); // 先转为日期格式
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {
        switch (a) {
          case 'yyyy':
            return zero(t.getFullYear());
          case 'MM':
            return zero(t.getMonth() + 1);
          case 'dd':
            return zero(t.getDate());
          case 'HH':
            return zero(t.getHours());
          case 'mm':
            return zero(t.getMinutes());
          case 'ss':
            return zero(t.getSeconds());
        }
      });
    }
    console.log(formatDateTime(1636526925952, 'yyyy-MM-dd HH:mm:ss')); // '2021-11-10 14:48:45'

倒计时小组件

闹这个小组件的初衷是因为vant的count-down组件change事件不响应，无法自定义样式

// count-down.vue

<template>
  <div class="count-down">
      <slot>{{days}} 天 {{hours}} 时 {{minutes}} 分 {{seconds}} 秒</slot>
  </div>
</template>

<script>
export default {
  props: {
    timer: { // 过期时间
      type: String,
      default: '2021-11-11 11:11:11'
    }
  },
  data() {
    return {
      interval: null,
      days: '0',
      hours: '0',
      minutes: '0',
      seconds: '0'
    };
  },
  mounted() {
    this.interval = setInterval(() => {
      this.formatDate();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    formatDate() {
      let targetTime = new Date(this.timer).getTime(),
        currentTime = new Date().getTime(),
        differenceVal = (targetTime - currentTime) / 1000; // 时间戳值差除以1000 得到秒
      if (differenceVal <= 0) {
        console.log('已过期');
        this.$emit('finished'); // 派发finished事件
        clearInterval(this.interval);
        return;
      }
      this.days = parseInt(differenceVal / 86400); // 天
      this.hours = parseInt(differenceVal % 86400 / 3600); // 时
      this.minutes = parseInt(differenceVal % 3600 / 60); // 分
      this.seconds = parseInt(differenceVal % 60); // 秒
      this.$emit('change', { // 派发change事件
        days: this.days,
        hours: this.hours,
        minutes: this.minutes,
        seconds: this.seconds
      });
    }
  }
};
</script>

外部调用

<count-down class="countDown" @change="val=> timeData = val">
  <template #default>
      <span class="days">{{ timeData.days + '天'}}</span>
      <span class="block">{{ timeData.hours }}</span>
      <span class="colon">:</span>
      <span class="block">{{ timeData.minutes }}</span>
      <span class="colon">:</span>
      <span class="block">{{ timeData.seconds }}</span>
  </template>
</count-down>

结语

Date 对象在实际应用中还是很广泛的，记录一下。