微信小程序?qū)崿F(xiàn)批量倒計(jì)時(shí)功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)批量倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下
//適用于商品列表倒計(jì)時(shí)/** * end_time int 結(jié)束時(shí)間 * param int 數(shù)組鍵 */
1.展示效果如下:
2.wxml代碼:
<p class="promotion-label-tits">僅{{item.endtime}}</p>
3.js代碼:
//封裝的倒計(jì)時(shí)方法 //批量倒計(jì)時(shí) function grouponcountdown(that, end_time, param) { var EndTime = new Date(end_time).getTime(); // console.log(EndTime); var NowTime = new Date().getTime(); var total_micro_second = EndTime - NowTime; var groupons = that.data.groupon; // console.log(groupons); groupons[param].endtime = dateformats(total_micro_second); if (total_micro_second <= 0) { groupons[param].endtime = "已結(jié)束" } that.setData({ groupon: groupons }) setTimeout(function () { grouponcountdown(that, end_time, param); }, 1000) } // 時(shí)間格式化輸出,每1s都會(huì)調(diào)用一次 function dateformats(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 hrStr = hr.toString(); if (hrStr.length == 1) hrStr = '0' + hrStr; // 分鐘 var min = Math.floor(second / 60 % 60); var minStr = min.toString(); if (minStr.length == 1) minStr = '0' + minStr; // 秒 var sec = Math.floor(second % 60); var secStr = sec.toString(); if (secStr.length == 1) secStr = '0' + secStr; if (day <= 1) { return "剩 " + hrStr + ":" + minStr + ":" + secStr; } else { return "剩 " + day + " 天 " + hrStr + ":" + minStr + ":" + secStr; } } //end var app=getApp() Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { collageTeamlist : {} }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { app.showLoading(); var that = this wx.request({ success:function(res){ var grouponList = request.data.collageTeamlist // console.log(grouponList); for (var i = 0; i < grouponList.length; i++) { var lack_num = grouponList[i].create_num - grouponList[i].current_num grouponList[i].lack_num = lack_num } that.setData({ groupon: grouponList }) var data = that.data.groupon //列表獲取到數(shù)據(jù)進(jìn)行遍歷 for (var i = 0; i < data.length; i++) { var end_time = data[i].end_time.replace(/-/g, '/') grouponcountdown(that,end_time, i) } }, }) },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)單個(gè)或多個(gè)倒計(jì)時(shí)功能
- uniapp微信小程序?qū)崿F(xiàn)一個(gè)頁(yè)面多個(gè)倒計(jì)時(shí)
- 微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(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)文章
原生js實(shí)現(xiàn)簡(jiǎn)易抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)簡(jiǎn)易抽獎(jiǎng)系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03微信小程序template模板與component組件的區(qū)別和使用詳解
這篇文章主要介紹了微信小程序template模板與component組件的區(qū)別和使用詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05JavaScript解構(gòu)賦值的5個(gè)常見(jiàn)場(chǎng)景與實(shí)例教程
解構(gòu)賦值是一種特殊的語(yǔ)法,它使我們可以將數(shù)組或?qū)ο蟆安鸢睘榈揭幌盗凶兞恐?因?yàn)橛袝r(shí)候使用變量更加方便,下面這篇文章主要給大家介紹了關(guān)于JavaScript解構(gòu)賦值的5個(gè)常見(jiàn)場(chǎng)景與實(shí)例的相關(guān)資料,需要的朋友可以參考下2021-11-11JavaScript實(shí)現(xiàn)Base64編碼轉(zhuǎn)換
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Base64編碼轉(zhuǎn)換的相關(guān)資料,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-04-04