小程序?qū)崿F(xiàn)列表多個(gè)批量倒計(jì)時(shí)
最近在寫一個(gè)列表功能,列表中有倒計(jì)時(shí)的效果,網(wǎng)上沒有可用的素材,以下是本人自己寫的,如有問題,希望大家指出。
先來看看基本的效果
小程序中列表倒計(jì)時(shí),類似活動倒計(jì)時(shí)列表,列表中有多個(gè)倒計(jì)時(shí)效果,且不沖突
先把時(shí)間打印出來,放在data中,然后在寫計(jì)時(shí)器;如果先寫計(jì)時(shí)器,然后把打印出來的時(shí)間放在data就會報(bào)錯(cuò),setData不支持這種操作。
數(shù)據(jù)文件(dates.js,返回的時(shí)間數(shù)據(jù)是剩余時(shí)間)
var dates=[ { dat:324235235 }, { dat:7200000 }, { dat:675875754 } ] module.exports = { datetime: dates }
wxml文件(a.wxml)
<view wx:for="{{wearList.datetime}}" wx:for-item="item" wx:key="id"> <view class='dates'>{{item.difftime}}</view> </view>
js文件(a.js)
var dates=require('../utils/dates.js');//數(shù)據(jù)文件 Page({ data:{}, onShow(a){ // console.log(dates.datetime)//數(shù)據(jù) let that=this; let len=dates.datetime.length;//時(shí)間數(shù)據(jù)長度 function nowTime() {//時(shí)間函數(shù) // console.log(a) for (var i = 0; i < len; i++) { var intDiff = dates.datetime[i].dat;//獲取數(shù)據(jù)中的時(shí)間戳 // console.log(intDiff) var day=0, hour=0, minute=0, second=0; if(intDiff > 0){//轉(zhuǎn)換時(shí)間 day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); if(hour <=9) hour = '0' + hour; if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; dates.datetime[i].dat--; var str=hour+':'+minute+':'+ second // console.log(str) }else{ var str = "已結(jié)束!"; clearInterval(timer); } // console.log(str); dates.datetime[i].difftime = str;//在數(shù)據(jù)中添加difftime參數(shù)名,把時(shí)間放進(jìn)去 } that.setData({ wearList: dates }) // console.log(that) } nowTime(); var timer = setInterval(nowTime, 1000); } })
小程序中列表倒計(jì)時(shí),類似活動倒計(jì)時(shí)列表,列表中有多個(gè)倒計(jì)時(shí)效果,且不沖突
先把時(shí)間打印出來,放在data中,然后在寫計(jì)時(shí)器;如果先寫計(jì)時(shí)器,然后把打印出來的時(shí)間放在data就會報(bào)錯(cuò),setData不支持這種操作。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 倒計(jì)時(shí)組件實(shí)現(xiàn)代碼
- 微信小程序動態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
- 微信小程序之發(fā)送短信倒計(jì)時(shí)功能
- js倒計(jì)時(shí)小程序
- 微信小程序注冊60s倒計(jì)時(shí)功能 使用JS實(shí)現(xiàn)注冊60s倒計(jì)時(shí)功能
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)60s獲取驗(yàn)證碼
- 微信小程序倒計(jì)時(shí)功能實(shí)現(xiàn)代碼
- 微信小程序電商常用倒計(jì)時(shí)實(shí)現(xiàn)實(shí)例
- 微信小程序?qū)崿F(xiàn)團(tuán)購或秒殺批量倒計(jì)時(shí)
- 微信小程序倒計(jì)時(shí)功能實(shí)例代碼
相關(guān)文章
JavaScript實(shí)現(xiàn)in-place思想的快速排序方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)in-place思想的快速排序方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08uniapp中使用計(jì)時(shí)器setInterval的場景與方法
計(jì)時(shí)器在日常開發(fā)中經(jīng)常會遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計(jì)時(shí)器setInterval的場景與方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08通過JavaScript實(shí)現(xiàn)撲克牌游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript如何通過面向?qū)ο髮?shí)現(xiàn)一個(gè)簡單的撲克牌游戲,文中的示例代碼代碼講解詳細(xì),感興趣的可以學(xué)習(xí)一下2022-07-07javascript json字符串到j(luò)son對象轉(zhuǎn)義問題
今天小編就為大家分享一篇關(guān)于javascript json字符串到j(luò)son對象轉(zhuǎn)義問題,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01createElement動態(tài)創(chuàng)建HTML對象腳本代碼
利用createElement動態(tài)創(chuàng)建鏈接,div等代碼2008-11-11javascript 拷貝節(jié)點(diǎn)cloneNode()使用介紹
這篇文章主要介紹了javascript 節(jié)點(diǎn)操作拷貝節(jié)點(diǎn)cloneNode()的使用,需要的朋友可以參考下2014-04-04javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法,可實(shí)現(xiàn)顯示一些按鈕如果點(diǎn)擊了,按鈕文本變?yōu)椤包c(diǎn)了”,其他按鈕文本變?yōu)椤皼]點(diǎn)”的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05