微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)
本文實(shí)例為大家分享了微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下
1、展示的效果如下

2、wxml代碼:
<!--倒計(jì)時(shí) -->
<text wx:if="{{clock!=''}}">僅剩{{clock}}</text>
<text wx:if="{{clock==''}}">已經(jīng)截止</text>
3、js代碼:
在拼團(tuán)項(xiàng)目中獲取到活動(dòng)結(jié)束時(shí)間的格式為一下格式

因該格式無法正常計(jì)算時(shí)長(zhǎng),所進(jìn)行了格式轉(zhuǎn)換new Date(that.data.collage.collage_end).getTime()
// 倒計(jì)時(shí)
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('時(shí)間初始化小于0,活動(dòng)已結(jié)束狀態(tài)');
total_micro_second = 1; //單位毫秒 ------ WHY?
}
// console.log('剩余時(shí)間:' + total_micro_second);
// 渲染倒計(jì)時(shí)時(shí)鐘
that.setData({
clock: dateformat(total_micro_second) //若已結(jié)束,此處輸出'0天0小時(shí)0分鐘0秒'
});
if (total_micro_second <= 0) {
that.setData({
clock: "已經(jīng)截止"
});
return;
}
setTimeout(function () {
total_micro_second -= 1000;
countdown(that);
}
, 1000)
}
// 時(shí)間格式化輸出,如11天03小時(shí)25分鐘19秒 每1s都會(huì)調(diào)用一次
function dateformat(micro_second) {
// 總秒數(shù)
var second = Math.floor(micro_second / 1000);
// 天數(shù)
var day = Math.floor(second / 3600 / 24);
// 小時(shí)
var hr = Math.floor(second / 3600 % 24);
// 分鐘
var min = Math.floor(second / 60 % 60);
// 秒
var sec = Math.floor(second % 60);
return day + "天" + hr + "小時(shí)" + min + "分鐘" + sec + "秒";
}
Page({
onLoad: function(options) {
wx.request({
success: function(request) {
// 倒計(jì)時(shí)(獲取結(jié)束時(shí)間后再進(jìn)行倒計(jì)時(shí)方法調(diào)用)
countdown(that);
}
})
}
})
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)單個(gè)或多個(gè)倒計(jì)時(shí)功能
- uniapp微信小程序?qū)崿F(xiàn)一個(gè)頁面多個(gè)倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)日期格式化和倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)商城倒計(jì)時(shí)
- 微信小程序?qū)崿F(xiàn)批量倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)訂單倒計(jì)時(shí)
- 微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
- 微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
- 微信小程序倒計(jì)時(shí)功能實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)功能
相關(guān)文章
微信小程序?qū)崿F(xiàn)富文本圖片寬度自適應(yīng)的方法
小程序里圖片會(huì)顯示不全,這時(shí)就應(yīng)該做相應(yīng)的處理,使小程序里圖片顯示正確,這篇文章主要介紹了微信小程序?qū)崿F(xiàn)富文本圖片寬度自適應(yīng)的方法,感興趣的小伙伴們可以參考一下2019-01-01
js中async函數(shù)結(jié)合promise的小案例淺析
這篇文章主要介紹了js中async函數(shù)結(jié)合promise的小案例淺析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
詳解JavaScript中關(guān)于this指向的4種情況
這篇文章主要介紹了JavaScript中關(guān)于this指向的4種情況,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
關(guān)于JavaScript數(shù)組去重的一些理解匯總
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的一些理解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
解決layui 三級(jí)聯(lián)動(dòng)下拉框更新時(shí)回顯的問題
今天小編就為大家分享一篇解決layui 三級(jí)聯(lián)動(dòng)下拉框更新時(shí)回顯的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript中xml操作實(shí)現(xiàn)代碼
好久沒寫了。感覺今時(shí)今日,HTML5 還依然只是一種玩票的東東。但愿 w3c 的標(biāo)準(zhǔn)可以早一點(diǎn)出臺(tái),不要讓各種瀏覽器的兼容問題和支持程度搞死2011-11-11

