vue2-实现动态显示时间

合集 - vue2-功能实现(6)

1.vue2-实现动态显示时间2024-12-09

2.vue+.net 利用signalR实现实时推送和显示通知消息02-133.插件1-图片预览组件v-viewer（vue2）02-114.vue2-自定义全局toast提示插件2024-10-285.vue2-常用富文本编辑器使用介绍2024-07-216.Vue2-利用自定义指令实现按钮权限控制2024-07-13

收起

效果

实现代码

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])
      );
    }
  }
}