您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序中如何動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
1、一般我們說(shuō)的顯示秒殺都是指的單條數(shù)據(jù),循環(huán)我沒(méi)做。
效果:
2、wxml代碼:
<p> <block wx:if="{{total_micro_second<=0}}">剩余時(shí)間:已經(jīng)截止</block> <block wx:if="{{clock!='已經(jīng)截止'}}">剩余時(shí)間:{{clock}}</block> </p>
3、.js文件代碼:
function countdown(that) { var EndTime = that.data.end_time || []; var NowTime = new Date().getTime(); var total_micro_second = EndTime - NowTime || []; console.log('剩余時(shí)間:' + total_micro_second); // 渲染倒計(jì)時(shí)時(shí)鐘 that.setData({ clock: dateformat(total_micro_second) }); if (total_micro_second <= 0) { that.setData({ clock: "已經(jīng)截止" }); //return; } setTimeout(function () { total_micro_second -= 1000; countdown(that); } , 1000) } // 時(shí)間格式化輸出,如11:03 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({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { id:'', result:[], end_time:'', clock:'' },/** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { var that = this; wx.request({ url: 'https://m.******.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//不含富文本html data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { 'Content-Type': 'application/json' }, success: function (res) { that.setData({ common: res.data, //一維數(shù)組,全部數(shù)據(jù) end_time: res.data.end_time //項(xiàng)目截止時(shí)間,時(shí)間戳,單位毫秒 }) console.log(that.data.common); console.log('結(jié)束時(shí)間:' + that.data.end_time); }, fail: function (res) { }, complete: function (res) { }, }), //調(diào)用上面定義的遞歸函數(shù),一秒一刷新時(shí)間 countdown(that); },
以上是“微信小程序中如何動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。