vue 实现计时器获取当前日期和时间

vue 实现计时器获取当前日期和时间

首先简单介绍Window 的 setInterval()方法和 clearInterval()方法：
setInterval() 函数会每秒执行一次函数，使用clearInterval()方法来停止执行。

第一步：定义个变量接受时间值，挂载到DOM元素上。

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

第二步：在data里面定义这个变量。

data () {
    return {
      timer: '', //定义的计数器
      nowTime: ''
    }
  },

第三步：在mounted()函数中调用这个setInterval() 函数。（mounted函数:一般在页面初始化完成后再对dom节点进行相关操作）。

 mounted () {
    //时间转换
    this.timer = setInterval(() => {
      let date = new Date();
      let year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      this.nowTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      // return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    }, 1000)
  },
  
  <!--
 beforeDestroy () {
    window.clearInterval(this.timer) //clearInterval() 方法来停止执行这个计时器
  }
  -->

第四步：可简单写个这个计时变量所在div的样式。

.time {
      color: #fff;
      font-size: 16px;
      font-weight: 700;
    }