vue中定时器

效果样式：

1513319887(1).jpg

直接上代码：

HTML:

<div class="timer">
      <icon type="waiting-circle"></icon>
      <span>
      支付剩余时间：{{time}}
      </span>
</div>

CSS:

.timer {
      margin-bottom: 0.1rem;
      text-align: center;
      height: 0.6rem;
      line-height: 0.6rem;
      background: #fffae4;
      .font(0.22rem, rgb(233, 159, 63));
    }

JS:

 data() {
    return {
      limitTime: 10,
      time: '',
      stop: false,
    };
  },
  methods: {
     timeDown () {
      let limitTime = this.limitTime;
      let d = parseInt(limitTime/(24*60*60))
      let h = this.formate(parseInt(limitTime/(60*60)%24))
      let m = this.formate(parseInt(limitTime/60%60))
      let s = this.formate(parseInt(limitTime%60))
      if (limitTime <= 0) {
       // let btn = document.getElementsByClassName("btn")[0].firstChild;
        this.stop = true;
        this.time = '订单超时，请重新下单'
        //btn.setAttribute("disabled", true);
        return;
      }
      if (d > 0) {
        this.time = `${d}天${h}小时${m}分${s}秒`;
      } 
      if (d <= 0 && h > 0 ) {
        this.time = `${h}小时${m}分${s}秒`; 
      }
      if (d <= 0 && h <= 0) {
        this.time =`${m}分${s}秒`;
      }
    },
    formate (time) {
      if (time >= 10) {
         return time
      } else {
        return `0${time}`
      }
    },
  },
  mounted() {
    _this.timeDown ();
    let time = setInterval(()=> {
      if (_this.stop == true) {
         clearInterval(time);
      }
      _this.limitTime --;
      _this.timeDown();
    }, 1000)
  }