微信小程序中活动倒计时的效果怎样做？

    微信小程序中活动倒计时的效果怎样做？倒计时的功能应用场景有很多，例如答题倒计时，商城活动倒计时等等，这里我们主要来接微信小程序中活动倒计时功能的实现，有一定的参考价值，感兴趣的朋友就继续往下看吧。
 
商城商品中的活动倒计时
 
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;
}