微信小程序倒计时功能

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

 countDownDay: 0,
 countDownHour: 0,
 countDownMinute: 0,
 countDownSecond: 0,

 dealActiveTimer: function (activesTimeDifference) {
 if (activesTimeDifference == null || activesTimeDifference == "") {
 return
 }
 LogUtil.show("时间差: " + activesTimeDifference)
 // 1519872824000
 // var totalSecond = (Date.parse(new Date()) + 300000000) / 1000 - Date.parse(new Date()) / 1000;
 var totalSecond = activesTimeDifference

 var interval = setInterval(function () {
 // 秒数 
 var second = totalSecond;

 // 天数位 
 var day = Math.floor(second / 3600 / 24);
 var dayStr = day.toString();
 if (dayStr.length == 1) dayStr = '0' + dayStr;

 // 小时位 
 var hr = Math.floor((second - day * 3600 * 24) / 3600);
 var hrStr = hr.toString();
 if (hrStr.length == 1) hrStr = '0' + hrStr;

 // 分钟位 
 var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
 var minStr = min.toString();
 if (minStr.length == 1) minStr = '0' + minStr;

 // 秒位 
 var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
 var secStr = sec.toString();
 if (secStr.length == 1) secStr = '0' + secStr;

 this.setData({
 countDownDay: dayStr,
 countDownHour: hrStr,
 countDownMinute: minStr,
 countDownSecond: secStr,
 });
 totalSecond--;
 if (totalSecond < 0) {
 clearInterval(interval);
 wx.showToast({
 title: '活动已结束',
 });
 this.setData({
 countDownDay: '00',
 countDownHour: '00',
 countDownMinute: '00',
 countDownSecond: '00',
 });
 this.requestData()
 }
 }.bind(this), 1000);
 },

 <view class='activeShow-timer' hidden='{{goodsInfo.activesType!=1}}'>
 <text class='activeExplain'>{{activesTimeFlag=="1"?"距活动结束":"距活动开始"}}:</text>
 <text hidden='{{countDownDay<=0}}' class='activeTag'>{{countDownDay}}</text>
 <text hidden='{{countDownDay<=0}}' class='activeExplain'>天</text>
 <text class='activeTag'>{{countDownHour}}</text>
 <text class='activeExplain'>:</text>
 <text class='activeTag'>{{countDownMinute}}</text>
 <text class='activeExplain'>:</text>
 <text class='activeTag'>{{countDownSecond}}</text>
 </view>