知识学堂 > 课程 > 小程序倒计时

小程序倒计时

发布日期:2020/6/4 来源:聚恒【返回】

显示wxml

<view class="Clock">
    <image src="https://bb.parwiheart.com/image/clock.svg" mode="widthFix"></image>
    <h2>限时秒杀</h2>
    <span>{{day}}</span>
    <em></em>
    <span>{{hou}}</span>
    <em>:</em>
    <span>{{min}}</span>
    <em>:</em>
    <span>{{sec}}</span>
    <view class="cb"></view>
  </view>
js(调用传入时间 endTime=2020-06-04 20:45:15)

/**
   * 倒计时
   */
  countDown:function(){
    var that=this;
    var nowTime = new Date().getTime();//现在时间(时间戳)
    var endTime = new Date(that.data.endTime).getTime();//结束时间(时间戳)
    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)
    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;
  },