微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)功能

更新時(shí)間：2020年11月19日 10:23:59 作者：大白大白大白

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)功能的具體代碼，供大家參考，具體內(nèi)容如下

商城商品中的活動(dòng)倒計(jì)時(shí)

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

Page({

 /**
 * 頁(yè)面的初始數(shù)據(jù)
 */
 data: {
 headerImgs: postData.postSwiperData,
 countDownDay: '',
 countDownHour: '',
 countDownMinute: '',
 countDownSecond: '',
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 onLoad: function(options) {
 var id = options.id; //頁(yè)面跳轉(zhuǎn)傳過(guò)來(lái)的值
 },
 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('當(dāng)前時(shí)間'+NowTime+'\n剩余時(shí)間：' + total_micro_second);
 // 渲染倒計(jì)時(shí)時(shí)鐘
 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: "已經(jīng)截止"
 // });
 // //return;
 // }
 setTimeout(function() {
 total_micro_second -= 1000;
 countdown(that);
 }, 1000)
}

// 時(shí)間格式化輸出
function dateformaDay(micro_second) {
 // 總秒數(shù)
 var second = Math.floor(micro_second / 1000);
 // 天數(shù)
 var day = Math.floor(second / 3600 / 24);
 return day;
}

function dateformaHour(micro_second) {
 // 總秒數(shù)
 var second = Math.floor(micro_second / 1000);
 // 小時(shí)
 var hr = Math.floor(second / 3600 % 24);
 return hr;
}

function dateformaMinute(micro_second) {
 // 總秒數(shù)
 var second = Math.floor(micro_second / 1000);
 // 分鐘
 var min = Math.floor(second / 60 % 60);
 return min;
}

function dateformaSecondMinute(micro_second) {
 // 總秒數(shù)
 var second = Math.floor(micro_second / 1000);
 // 秒
 var sec = Math.floor(second % 60);
 return sec;
}

wxml

<!-- 倒計(jì)時(shí) start -->
 <view style='display:flex;flex-direction:column;'>
 <span style="font-size:10px;color:white;margin-top:5px;">距活動(dòng)結(jié)束還剩</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'>時(shí)</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>
<!-- 倒計(jì)時(shí) 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;
}

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: