思路:首先獲取到每個倒計時的結束時間,然後把結束時間跟當前時間轉換成時間戳,結束時間減去當前時間再除以1000(因為時間戳是毫秒級)就是該結束時間距離當前時間的秒數了,然後根據公式計算出時分秒,最後使用定時器每秒跑一次就實現成功啦~
兩種倒計時思路差不多,多個倒計時多了遍歷陣列步驟,遍歷拿到陣列中每個物件結束時間來計算時間
好啦!說完思路先上效果圖看看~~~
上**,上**!!!重點來啦…
wxml:
// 單個倒計時-----wxml
="countdown"
>
="item"
>
倒計時:
="txt-time"
>
}<
/view>
:="txt-time"
>
}<
/view>
:="txt-time"
>
}<
/view>
<
/view>
<
/view>
css:
// 單個倒計時-----wxss
.countdown .item
.countdown .item .txt-time
js:
// 單個倒計時-----js
page(,
//時間顯示小於10的格式化函式
timeformat
(param)
,//倒計時
singlecountdown:
function()
;var endtime =
newdate
(that.data.endtime.
replace
(/-/g
,"/"))
.gettime()
;//結束時間時間戳
var currenttime =
newdate()
.gettime()
;//當前時間時間戳
time =
(endtime - currenttime)
/1000
;// 如果活動未結束
if(time >0)
}else
cleartimeout
(that.data.timeintervalsingle)
;//清除定時器
}var timeintervalsingle =
settimeout
(that.singlecountdown,
1000);
that.
setdata()
},/** * 生命週期函式--監聽頁面載入
*/onload:
function
(options),}
)
wxml:
// 多個倒計時顯示-----wxml
="countdown"
>
for=
"}" wx:key=
"index"
>
="item"
>
}:
="txt-time"
>
}<
/view>
:="txt-time"
>
}<
/view>
:="txt-time"
>
}<
/view>
<
/view>
<
/block>
<
/view>
wxss: 跟上面單個倒計時樣式一樣,這裡就不貼出來啦!
js:
// 多個倒計時顯示-----wxml
page(,
,],}
,//時間顯示小於10的前面補0方法
timeformat
(param)
,//多個倒計時函式
severalcountdown:
function()
;var timelist = that.data.timelist;
//遍歷陣列,計算每個item的倒計時秒數
timelist.
foreach
(function
(item)
}else
cleartimeout
(that.data.timeintervalseveral)
;//清除定時器
} item.time = obj;})
var timeintervalseveral =
settimeout
(that.severalcountdown,
1000);
that.
setdata()
},/** * 生命週期函式--監聽頁面載入
*/onload:
function
(options),}
)
易錯點:結束時間轉換成時間戳時要特別特別注意把時間字串的『-』替換成『/』,不然在ios中有報錯
好了,看到這裡單個或者多個倒計時顯示功能就實現成功啦,具體樣式可以根據自己需求修改即可。
微信小程式 倒計時
需要乙個目標日期,初始化時,先得出到當前時間還有剩餘多少秒 1.將秒數換成格式化輸出為xx天xx小時xx分鐘xx秒 xx 2.提供乙個時鐘,每10ms執行一次,渲染時鐘,再總ms數自減10 3.剩餘的秒次為零時,return,給出tips提示說,已經截止 定義乙個總毫秒數,以十小時為例。var to...
微信小程式實現倒計時功能
在 商品資訊裡,會有倒計時的功能 計算時間需要轉化為時間戳,但是安卓和ios系統對於識別的時間格式是不一樣的,安卓對識別沒有要求。ios格式要求 2018 08 20 10 20 32,使用date.parse 轉化時間戳不會出現在ios端無法倒計時。timeformat function para...
微信小程式 倒計時功能
做小程式專案中,需要做乙個倒計時功能,如下圖 記錄一下實現步驟 1.考慮到這個功能可能會有多處用到,所以把倒計時的函式寫在utils.js裡面 const formatnumber n 倒計時 function countdown that t settimeout function countdo...