위챗 애플릿이 카운트다운 기능을 실현하다

본고의 실례는 여러분에게 위챗 프로그램이 카운트다운 기능을 실현하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다.
상점 상품 중 이벤트 카운트다운
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+'
 ：' + 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;
}

여러분에게 현재 관심이 비교적 높은 위챗 소프로그램 강좌 한 편을 추천합니다《위챗 소프로그램 개발 강좌》. 여러분을 위해 정성스럽게 정리한 것이니 마음에 드셨으면 좋겠습니다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.