vue自定义动态时钟显示

limit for me

已于 2022-06-14 15:03:58 修改

阅读量842

点赞数

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

于 2022-06-13 16:46:06 首次发布

本文链接：https://blog.csdn.net/limmt2020/article/details/125263064

版权

js 同时被 2 个专栏收录

44 篇文章 5 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

vue自定义动态时钟显示

效果：
在这里插入图片描述
一秒动一次
代码：

<div class="time">
   {{ nowTime }}
</div>

  data() {
    return {
      nowTime:null,
  }
  },
  methods:{
	  getNowFormatDate(v) {
	      let date=v;
	      let y = date.getFullYear();
	      let m = date.getMonth() + 1;
	      m = m < 10 ? "0" + m : m;
	      let d = date.getDate();
	      d = d < 10 ? "0" + d : d;
	      let h = date.getHours();
	      h = h < 10 ? "0" + h : h;
	      let minute = date.getMinutes();
	      minute = minute < 10 ? "0" + minute : minute;
	      let second = date.getSeconds();
	      second = second < 10 ? "0" + second : second;
	      this.nowTime = h + ":" + minute + ":" + second;
	      // return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
	   }, //转日期方法，可以根据需要加上年月日
	   nowTimes() {
	      this.getNowFormatDate(new Date());
	      setInterval(this.nowTimes, 1000);
	      this.clear();
	    },
	    clear() {
	      clearInterval(this.nowTimes);
	      this.nowTimes = null;
	    },
  }
mounted() {
      this.nowTimes();
    },