Vue中获取当前时间并实时刷新

飞熊 • 2023年4月28日上午10:18 • 前端开发 • 阅读 219

1. 实现代码

<template>
  <div>
    {{nowDate}}{{nowWeek}}{{nowTime}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      nowDate: "",    // 当前日期
      nowTime: "",    // 当前时间
      nowWeek: ""     // 当前星期
    }
  },
  methods:{
    dealWithTime(data) { // 获取当前时间
      let formatDateTime;
      let Y = data.getFullYear();
      let M = data.getMonth() + 1;
      let D = data.getDate();
      let H = data.getHours();
      let Min = data.getMinutes();
      let S = data.getSeconds();
      let W = data.getDay();
      H = H < 10 ? "0" + H : H;
      Min = Min < 10 ? "0" + Min : Min;
      S = S < 10 ? "0" + S : S;
      switch (W) {
        case 0:
          W = "日";
          break;
        case 1:
          W = "一";
          break;
        case 2:
          W = "二";
          break;
        case 3:
          W = "三";
          break;
        case 4:
          W = "四";
          break;
        case 5:
          W = "五";
          break;
        case 6:
          W = "六";
          break;
        default:
          break;
      }
      this.nowDate = Y + "年" + M + "月" + D + "日 ";
      this.nowWeek = "周" + W ; 
      this.nowTime = H + ":" + Min + ":" + S;
      // formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;
    },
  },
  mounted() { 
    // 页面加载完后显示当前时间
    this.dealWithTime(new Date())
    // 定时刷新时间
    this.timer = setInterval(()=> {
       this.dealWithTime(new Date()) // 修改数据date
    }, 500)
  }, 
  destroyed() {
    if (this.timer) {  // 注意在vue实例销毁前，清除我们的定时器
      clearInterval(this.timer);
    }
  }
}
</script>

<style lang="scss" scope>

</style>

2. 实现效果

3. 关于 Date 对象拓展

Date 对象用于处理日期和时间。
日期对象是用 new Date() 创建的。

实例化日期有四种方式：

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Date 对象属性

属性	描述
constructor	返回创建 Date 对象原型的函数。
prototype	允许您向对象添加属性和方法。

Date 对象方法

方法	描述
getDate()	返回月中的第几天（从 1 到 31）。
getDay()	返回星期几（0-6）。
getFullYear()	返回年份。
getHours()	返回小时（从 0-23）。
getMilliseconds()	返回毫秒（0-999）。
getMinutes()	返回分钟（从 0-59）。
getMonth()	返回月份（从 0-11）。
getSeconds()	返回秒数（从 0-59）。
getTime()	返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。
getTimezoneOffset()	返回 UTC 时间与本地时间之间的时差，以分钟为单位。
getUTCDate()	根据世界时，返回月份中的第几天（从 1 到 31）。
getUTCDay()	根据世界时，返回星期几（0-6）。
getUTCFullYear()	根据世界时，返回年份。
getUTCHours()	根据世界时，返回小时（0-23）。
getUTCMilliseconds()	根据世界时，返回毫秒数（0-999）。
getUTCMinutes()	根据世界时，返回分钟（0-59）。
getUTCMonth()	根据世界时，返回月份（0-11）。
getUTCSeconds()	根据世界时，返回秒数（0-59）。