四步教你实现一个前端的动态实时时间（可自定义时间格式）

前言：我是在Vue中做的

 1、将你的实时时间放在一个合适的位置

<div style="position: relative; padding-top: 0px; margin-top: -5px">
  <div style="position: absolute; left: auto; color: black; background-color: #7fd584; font-size: 38px">
    {{ dateFormat(date) }}
  </div>
</div>

2、在data里面的return里添加date 

date: new Date(),

3、在组件挂载完成后获取当前时间，并且设置1秒获取一次 

mounted() {
  // 在组件挂载完成后启动定时器
  let _this = this;
      this.timer1 = setInterval(() => {
          _this.date = new Date(); 
      }, 1000);
},

4、在methods里设置显示的时间格式方法

//实时时间
dateFormat(time) {
  var date = new Date(time);
  var year = date.getFullYear();
  /* 在日期格式中，月份是从0开始的，因此要加0
    * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
    * */
  var month =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours =
    date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();


  //  var mseconds =
  //         date.getMilliseconds() ;

  if (seconds % 2 == 0) {
    this.flag = 1;
  } else {
    this.flag = 0;
  }

  //整点自动刷新 发货时间和创建时间
  if (seconds == "00" && minutes == "00" && date.getHours() % 6 == 0) {
    // console.log(mseconds)
    this.$router.go(0)

    //  this.initTime();
    //  console.log(minutes)
  }

  // 拼接
  return (
    year +
    "-" +
    month +
    "-" +
    day +
    " " +
    hours +
    ":" +
    minutes +
    ":" +
    seconds
  );
},