最近因為一個專案需要用到商品批量倒計時，當時使用vant封裝好的元件CountDown編寫

起初不知道“timeData”這個物件只需要傳time的時間戳就可以自動生成，走了一大波彎路，現在想想也是醉了

最開始寫這個倒計時的時候沒有考慮到使用當前伺服器時間問題，只獲取了本地時間 new Date().getTime()，然後發現這個不行,只要使用者修改下手機本地時間，這個倒計時就不行了，有安全隱患，在網上也搜了一些相關知識，但都不盡人意，故想寫這一篇文章避免大家再走我之前的彎路！

廢話不多少說，上程式碼

html:

js:

1、skl_arr[i].nowdate_time，skl_arr[i].end_time都是後臺提供的欄位，格式為"2020-01-02 18:40:48"，當然你也可以讓後臺返回時間戳給你，這樣就更方便前端了（省掉newDate(String(XX).replace(/\-/g,'/')).getTime()這一步轉換時間戳，其中.replace(/\-/g,'/')為相容蘋果時間顯示問題）

2、其中skl_arr[i].nowdate_time是伺服器當前時間，skl_arr[i].end_time商品倒計時結束時間，skl_arr[i].curTime是自己定義的一個欄位，用於上述html中的:time="item.curTime"​​​​​​​使用

3、最後在倒計時結束後呼叫結束回撥函式,用於更新按鈕，文字狀態，變成已結束狀態

css樣式就不上傳了，最後結果如下

總結

以上所述是小編給大家介紹的vue+vant實現商品列表批量倒計時功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援！