vue页面实现显示当前动态时间

Fansr_

于 2021-10-26 10:47:25 发布

阅读量931

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Fansr_/article/details/120967265

vue 专栏收录该内容

17 篇文章

订阅专栏

该博客展示了如何在Vue应用中实现一个实时更新的日期时间显示功能。通过使用`setInterval`创建定时器更新当前时间，并用`toLocaleString`进行格式化，确保日期时间始终为最新状态。同时，`FormatTime`方法用于处理日期时间的格式，确保小时、分钟和秒不足两位时前面自动补零。此外，`beforeDestroy`钩子函数用于在组件销毁时清除定时器，防止内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div>{{ FormatTime(nowTime) }}</div>

data() {
  return {
    timer: undefined,
    nowTime: new Date(),
  };
},
created() {
  // 显示时间
  this.timer = setInterval(() => {
    this.nowTime= new Date().toLocaleString();
  });
},
// 销毁定时器
beforeDestroy() {
  if (this.timer) {
    clearInterval(this.timer);
  }
},
methods: {
    FormatTime() {
      //返回显示的日期时间格式
      var date = new Date();
      var year = this.formatTime(date.getFullYear());
      var month = this.formatTime(date.getMonth() + 1);
      var day = this.formatTime(date.getDate());
      var hour = this.formatTime(date.getHours());
      var minute = this.formatTime(date.getMinutes());
      var second = this.formatTime(date.getSeconds());
      var weekday = date.getDay();
      var weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = weeks[weekday];
      return `${year}-${month}-${day} ${hour}:${minute}:${second} ${week}`;
    },
    formatTime(n) {
      //判断是否需要加0
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    },
}