思路：首先獲取到每個倒計時的結束時間，然後把結束時間跟當前時間轉換成時間戳，結束時間減去當前時間再除以1000（因為時間戳是毫秒級）就是該結束時間距離當前時間的秒數了，然後根據公式計算出時分秒，最後使用定時器每秒跑一次就實現成功啦~
兩種倒計時思路差不多，多個倒計時多了遍歷陣列步驟，遍歷拿到陣列中每個物件結束時間來計算時間
好啦！說完思路先上效果圖看看~~~
上**，上**！！！重點來啦…
wxml:
// 單個倒計時-----wxml
="countdown"
>
="item"
>
倒計時：
="txt-time"
>
}<
/view>
:="txt-time"
>
}<
/view>
:="txt-time"
>
}<
/view>
<
/view>
<
/view>
// 單個倒計時-----wxss
.countdown .item
.countdown .item .txt-time
// 單個倒計時-----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
="countdown"
>
for=
"}" wx:key=
"index"
>
="item"
>
}：
="txt-time"
>
}<
/view>
:="txt-time"
>
}<
/view>
:="txt-time"
>
}<
/view>
<
/view>
<
/block>
<
/view>
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),}
)
好了，看到這裡單個或者多個倒計時顯示功能就實現成功啦，具體樣式可以根據自己需求修改即可。
微信小程式 倒計時
需要乙個目標日期，初始化時，先得出到當前時間還有剩餘多少秒 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...