需要的格式为跳动的倒计时

在这里插入图片描述
没有gif版,凑合看看。

代码

1.template部分

<button @click="disCount">秒杀倒计时跳动{{count}}</button>

2.data()

//定义一个最后要展示的内容为空
count: ""

3.methods中写入:

disCount () {
      let overtime = "2021-10-28 14:00:50"; //结束时间
      var timer = setInterval(() => {
        var offset = Math.floor((Date.parse(overtime) - Date.now()) / 1000);
        console.log('offset', offset)
        if (offset <= 0) {
          clearInterval(timer);
          this.count = "00:00:00";
          return false;
        }
        var secTime = offset % 60; // %意思为取余数
        console.log('ccc', secTime)
        var minuTime = Math.floor(offset / 60) % 60;
        var hourTime = Math.floor(offset / 60 / 60) % 24;
        var day = Math.floor(offset / 60 / 60 / 24);

        // 补0操作
        secTime = (secTime < 10 ? '0' : '') + secTime;
        minuTime = (minuTime < 10 ? '0' : '') + minuTime;
        hourTime = (hourTime < 10 ? '0' : '') + hourTime;

        //拼接时间格式
        this.count = day + '天' + hourTime + '时' + minuTime + '分' + secTime + '秒';
      }, 1000)
    }
Logo

前往低代码交流专区

更多推荐