本文例項為大家分享了微信小程式實現倒計時功能的具體程式碼，供大家參考，具體內容如下

商城商品中的活動倒計時

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;
}

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。