前端获取当前系统时间/日期(vue写法)

尔滨丶陈春波

已于 2022-04-02 21:04:45 修改

阅读量3.9k

点赞数 1

分类专栏：后台管理系统文章标签： javascript 前端 vue.js html css

于 2021-09-05 22:38:15 首次发布

陈春波

本文链接：https://blog.csdn.net/weixin_48337566/article/details/120122916

版权

后台管理系统专栏收录该内容

58 篇文章 57 订阅

订阅专栏

本文介绍了在Vue项目中如何实时渲染并更新当前日期和时间，包括日期、小时、分钟和秒的获取与格式化，并展示了具体的代码实现。通过设置定时器，实现了时间的动态更新。同时，文章在组件销毁前还正确地清理了定时器，确保资源的合理使用。

摘要由CSDN通过智能技术生成

在这里插入图片描述

💌 作者简介

📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜
📜 CSDN主页：水香木鱼
📑 个人博客：陈春波
🎨 系列专栏：后台管理系统
🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝
📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

文章篇幅简短，但很详细。

演示效果：

在这里插入图片描述

1、时间渲染

<div>{{ nowDate + ' ' + nowTime + ' ' + nowWeek }}</div>

2、业务逻辑处理

data() {
	return {
	nowDate: "", // 当前日期
	nowTime: "", // 当前时间
	nowWeek: "", // 当前星期
	dialogTableVisible: false
	};
},
mounted() {
   this.currentTime();
  },
methods: {
  currentTime() {
    setInterval(this.getDate, 500);
  },
   getDate() {
    var _this = this;
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth() + 1;
    let dd = new Date().getDate();
    let week = new Date().getDay();
    let hh = new Date().getHours();
    let ms =
      new Date().getSeconds() < 10
        ? "0" + new Date().getSeconds()
        : new Date().getSeconds();
      let mf =
      new Date().getMinutes() < 10
        ? "0" + new Date().getMinutes()
        : new Date().getMinutes();
    if (week == 1) {
      this.nowWeek = "星期一";
    } else if (week == 2) {
      this.nowWeek = "星期二";
    } else if (week == 3) {
      this.nowWeek = "星期三";
    } else if (week == 4) {
      this.nowWeek = "星期四";
    } else if (week == 5) {
      this.nowWeek = "星期五";
    } else if (week == 6) {
      this.nowWeek = "星期六";
    } else {
      this.nowWeek = "星期日";
    }
    _this.nowTime = hh + ":" + mf + ":" + ms;
    _this.nowDate = yy + "/" + mm + "/" + dd;
  },
},
 // 销毁定时器
beforeDestroy() {
  if (this.getDate) {
    console.log("销毁定时器");
    clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
  }
},