小程序，倒计时效果

其实，原理很简单。
知道结束时间之后，进行计算，还有多少天，多少小时，多少分，多少秒。
每秒刷新一次时间。
倒计时结束之后，不再刷新，统统清零。

  data: {
    endTime: '', // 时间戳
  },
  // 倒计时
  countDown: function () {
    var that = this;
    var nowTime = new Date().getTime();//现在时间（时间戳）
    // var endTime = new Date(that.data.endTime).getTime();//结束时间（时间戳）
    var endTime = that.data.endTime * 1000;//结束时间（时间戳）
    var time = (endTime - nowTime) / 1000;//距离结束的毫秒数
    // 获取天、时、分、秒
    let day = parseInt(time / (60 * 60 * 24));
    let hou = parseInt(time % (60 * 60 * 24) / 3600);
    let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
    let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
    // console.log(day + "," + hou + "," + min + "," + sec)
    day = that.timeFormin(day),
      hou = that.timeFormin(hou),
      min = that.timeFormin(min),
      sec = that.timeFormin(sec);

    // 天，换成小时
    hou = day * 24 + hou;

    that.setData({
      // day: that.timeFormat(day),
      hou: that.timeFormat(hou),
      min: that.timeFormat(min),
      sec: that.timeFormat(sec)
    })
    // 每1000ms刷新一次
    if (time > 0) {
      that.setData({
        countDown: true
      })
      setTimeout(this.countDown, 1000);
    } else {
      that.setData({
        countDown: false
      })
    }
  },
  //小于10的格式化函数（2变成02）
  timeFormat(param) {
    return param < 10 ? '0' + param : param;
  },
  //小于0的格式化函数（不会出现负数）
  timeFormin(param) {
    return param < 0 ? 0 : param;
  }

onLoad: function ({ id }) {
    this.openid = app.globalData.openid || Storage.get().openid;
    request("getSeckillDetail", { id, openid: this.openid }).then(({ data }) => {
      this.setData({
        bannerList: data.product_banner_list,
        productInfo: data.product_info,
        productDetail: data.product_sample_list,
        endTime: data.end_time
      });

      // 开启倒计时
      var that = this;
      that.countDown()
    });
}

后台，返回时间戳，或者结束时间字符串都可以。前台，根据不同结果，进行处理。
处理成，day，hou，min，sec在页面中展示。
html

<view class="seckill_box">
    <view class="left">
        <view class="title">秒杀抢购中</view>
        <progress class="process" percent="20" backgroundColor="#9F2033" activeColor="#FFE0E5" font-size="20rpx" border-radius="5rpx" stroke-width="10rpx" show-info />
    </view>
    <view class="right">
        <view class="title">距本场结束剩余</view>
        <view class="count_down">
            <text class="time">{{hou}}</text> : <text class="time">{{min}}</text> : <text class="time">{{sec}}</text>
        </view>
    </view>
</view>

css

.seckill_box {
  750rpx;
  height: 100rpx;
  background-color: #E9455E;
  display: flex;
  
  .left {
    padding-top: 18rpx;
     50%;
    height: 100rpx;
    padding-left: 40rpx;
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color:#fff;
    }
    .process {
       90%;
      color:#FFF;
    }
  }
  .right {
     50%;
    height: 100rpx;
    padding-left:172rpx;
    padding-top: 18rpx;
    .title {
      font-size: 24rpx;
      font-weight: 500;
      color:#FFF;
    }
    .count_down {
      margin-top:5rpx;
      margin-left:15rpx;
      font-size: 20rpx;
      font-weight: 500;
      color:#FFF;
      .time {
        color:#E9455E;
        padding-left:5rpx;
        padding-right:5rpx;
        min- 36rpx;
        height: 26rpx;
        text-align: center;
        line-height: 26rpx;
        background-color: #FFF;
        display: inline-block;
      }
    }

  }
}