微信小程序動態(tài)顯示項目倒計時
更新時間:2019年06月20日 16:36:30 作者:Yako元
這篇文章主要為大家詳細介紹了微信小程序動態(tài)顯示項目倒計時,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序動態(tài)顯示項目倒計時的具體代碼,供大家參考,具體內容如下
1、展示的效果如下

2、wxml代碼:
<!--倒計時 -->
<text wx:if="{{clock!=''}}">僅剩{{clock}}</text>
<text wx:if="{{clock==''}}">已經截止</text>
3、js代碼:
在拼團項目中獲取到活動結束時間的格式為一下格式

因該格式無法正常計算時長,所進行了格式轉換new Date(that.data.collage.collage_end).getTime()
// 倒計時
function countdown(that) {
var EndTime = new Date(that.data.collage.collage_end).getTime() || [];
// console.log(EndTime);
var NowTime = new Date().getTime();
var total_micro_second = EndTime - NowTime || []; //單位毫秒
if (total_micro_second < 0) {
// console.log('時間初始化小于0,活動已結束狀態(tài)');
total_micro_second = 1; //單位毫秒 ------ WHY?
}
// console.log('剩余時間:' + total_micro_second);
// 渲染倒計時時鐘
that.setData({
clock: dateformat(total_micro_second) //若已結束,此處輸出'0天0小時0分鐘0秒'
});
if (total_micro_second <= 0) {
that.setData({
clock: "已經截止"
});
return;
}
setTimeout(function () {
total_micro_second -= 1000;
countdown(that);
}
, 1000)
}
// 時間格式化輸出,如11天03小時25分鐘19秒 每1s都會調用一次
function dateformat(micro_second) {
// 總秒數
var second = Math.floor(micro_second / 1000);
// 天數
var day = Math.floor(second / 3600 / 24);
// 小時
var hr = Math.floor(second / 3600 % 24);
// 分鐘
var min = Math.floor(second / 60 % 60);
// 秒
var sec = Math.floor(second % 60);
return day + "天" + hr + "小時" + min + "分鐘" + sec + "秒";
}
Page({
onLoad: function(options) {
wx.request({
success: function(request) {
// 倒計時(獲取結束時間后再進行倒計時方法調用)
countdown(that);
}
})
}
})
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

