Micro letter applet source code to achieve the order countdown function

effect:

 

 

Function unless otherwise specified, it is not difficult, just a little tedious for everyone on direct code, which code is useful for all stick directly past the line.

wxml:

<view class="countdownBox">
   <text>结束倒计时:</text>
   <view class="item">{{countdown.day}}</view>
   <text>天</text>
   <view class="item">{{countdown.hour}}</view>
   <text>时</text>
   <view class="item">{{countdown.minute}}</view>
   <text>分</text>
   <view class="item">{{countdown.second}}</view>
   <text>秒</text>
</view>

　　

wxss:

.countdownBox {
  width: 100%;
  height: 80rpx;
  background-color: red;
  border-radius: 50rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30rpx;
  margin-bottom: 20rpx;
}
.countdownBox .item{
  height: 60rpx;
  background-color: #fff;
  color: #000;
  box-sizing: border-box;
  padding: 0rpx 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;
  font-weight: 480;
  margin: 0rpx 10rpx;
}

　　

js:

Page({
  data: {
    countdown:{
      day: '',
      hour: '',
      minute: '',
      second: ''
    }
  },

　　

//开始
  startCountdown: function (serverTime, endTime) {
    var that = this;
    serverTime = new Date(serverTime);
    var millisecond = endTime.getTime() - serverTime.getTime();
    
    var interval = setInterval(function () {
      console.log('循环中');
      millisecond -= 1000;
      if (millisecond <= 0){
        clearInterval(interval);
        that.setData({
          countdown: {
            day: '00',
            hour: '00',
            minute: '00',
            second: '00'
          }
        });
        return;
      }
      that.transformRemainTime(millisecond);
    }, 1000);
  },
  // remaining time (in milliseconds) for conversion time 
  transformRemainTime: function (millisecond) { 
    var = that the this; 
    var = countdownObj that.data.countdown; 
    // seconds 
    ; = var seconds The Math.floor (millisecond / 1000) 
    // Number of Days 
    = that.formatTime countdownObj.day (Math.floor (seconds The / 3600/24)); 
    // h 
    countdownObj.hour = that.formatTime (Math.floor (seconds The / 24% 3600)); 
    // min 
    countdownObj.minute = that.formatTime (Math.floor (seconds The / 60% 60)); 
    // second 
    countdownObj.second = that.formatTime (Math.floor (seconds The 60%)); 
    that.setData ({ 
      COUNTDOWN: countdownObj 
    }); 
  }, 
  // formatted time 2 
  FormatTime: function (Time) { 
    IF (Time <10) 
      return '0' + Time; 
    return Time; 
  },

　　

serverTime I have here is a small program available cloud server time, endTime is countdown time, the difference between the two into days, hours, minutes and seconds on the line.

 

Download the complete code:  Event Registration applet micro letter applet - hazelnut application market