微信小程序 倒计时

商城商品中的活动倒计时
js

var endTime = new Date().getTime() + 24 * 3600 * 1000*4;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    headerImgs: postData.postSwiperData,
    countDownDay: '',
    countDownHour: '',
    countDownMinute: '',
    countDownSecond: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var id = options.id; //页面跳转传过来的值
  },
  onReady: function() {
    var that = this;

    countdown(that);
  }
})

function countdown(that) {
  var NowTime = new Date().getTime();
  var EndTime = endTime;
  var total_micro_second = EndTime - NowTime || [];
  console.log('当前时间'+NowTime+'\n剩余时间：' + total_micro_second);
  // 渲染倒计时时钟
  that.setData({
    countDownDay: dateformaDay(total_micro_second),
    countDownHour: dateformaHour(total_micro_second),
    countDownMinute: dateformaMinute(total_micro_second),
    countDownSecond: dateformaSecondMinute(total_micro_second),
  });
  // if (total_micro_second <= 0) {
  //   that.setData({
  //     clock: "已经截止"
  //   });
  //   //return;
  // }
  setTimeout(function() {
    total_micro_second -= 1000;
    countdown(that);
  }, 1000)
}

// 时间格式化输出
function dateformaDay(micro_second) {
  // 总秒数
  var second = Math.floor(micro_second / 1000);
  // 天数
  var day = Math.floor(second / 3600 / 24);
  return day;
}

function dateformaHour(micro_second) {
  // 总秒数
  var second = Math.floor(micro_second / 1000);
  // 小时
  var hr = Math.floor(second / 3600 % 24);
  return hr;
}

function dateformaMinute(micro_second) {
  // 总秒数
  var second = Math.floor(micro_second / 1000);
  // 分钟
  var min = Math.floor(second / 60 % 60);
  return min;
}

function dateformaSecondMinute(micro_second) {
  // 总秒数
  var second = Math.floor(micro_second / 1000);
  // 秒
  var sec = Math.floor(second % 60);
  return sec;
}

wxml

<!-- 倒计时 start -->
  <view style='display:flex;flex-direction:column;'>
    <span style="font-size:10px;color:white;margin-top:5px;">距活动结束还剩</span>
    <view class='time-container'>
      <text class='time-number'>{{countDownDay}}</text>
      <span class='time-text'>天</span>
      <text class='time-number'>{{countDownHour}}</text>
      <span class='time-text'>时</span>
      <text class='time-number'>{{countDownMinute}}</text>
      <span class='time-text '>分</span>
      <text class='time-number '>{{countDownSecond}}</text>
      <span class='time-text '>秒</span>
    </view>
  </view>
  <!-- 倒计时 end  -->

wxss

.time-container {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  align-items: center;
}

.time-number {
  background: white;
  color: red;
  width: 18px;
  height: 18px;
  font-size: 12px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-text {
  font-size: 10px;
  color: white;
  margin: 3px;
}