vue中动态显示当前时间

vue中动态显示当前时间,第1张

首先在data中写入:

timer: undefined, 定一个计时器

nowTime: new Date(),当前时间

data中:

  data() {
    return {
      timer: undefined,
      nowTime: new Date(),
    };
  },

  created 中:

created() {

// 要显示时间,在渲染页面之前一直调用该函数,对this.time进行赋值开启定时

this.timer = setInterval(() => {

this.nowTime = new Date().toLocaleString();

});

},

 beforeDestroy中:

// 关闭页面销毁定时器

  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;
      }
    },

有什么不懂的欢迎使用风尚云搜~ 

 风尚云网-风尚云搜:我们致力于更快更全的搜索!接口持续更新!敬请期待!!!风尚云网-风尚云搜:我们致力于更快更全的搜索!接口持续更新!敬请期待!!!http://1813783665.3vzhuji.cc/caidan/sou.html

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1320477.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存