vue2-实现动态显示时间

效果

实现代码

export default {
   data() {
    return {
        time:''
    }
  },
   created() {
    let _date = this.showTime();
    this.time = _date;

    setInterval(()=>{
      this.time = this.showTime();
    },1000);
  },
  methods: {
     showTime() {
      const week = new Array(
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"
      );

      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDay();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();

      return (
        year +
        "." +
        (month < 10 ? "0" + month : month) +
        "." +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minute < 10 ? "0" + minute : minute) +
        ":" +
        (second < 10 ? "0" + second : second) +
        " " +
        (week[date.getDay() - 1] || week[6])
      );
    }
  }
}
posted @ 2024-12-09 14:04  相遇就是有缘  阅读(153)  评论(0)    收藏  举报