vue+vant實現商品列表批量倒計時功能

 更新時間:2020-01-16 15:59:46   作者:佚名   我要評論(0)

最近因為一個項目需要用到商品批量倒計時,當時使用vant封裝好的組件CountDown編寫

起初不知道“timeData”這個對象只需要傳time的時間戳就可以自動生成,走了一大

最近因為一個項目需要用到商品批量倒計時,當時使用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",當然你也可以讓后臺返回時間戳給你,這樣就更方便前端了(省掉new Date(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實現商品列表批量倒計時功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

您可能感興趣的文章:

  • 移動端 Vue+Vant 的Uploader 實現上傳、壓縮、旋轉圖片功能
  • 詳解VUE項目中安裝和使用vant組件
  • 詳解vantUI框架在vue項目中的應用踩坑
  • Vant的安裝和配合引入Vue.js項目里的方法步驟
  • Vue驗證碼60秒倒計時功能簡單實例代碼
  • Vue寫一個簡單的倒計時按鈕功能
  • vue實現驗證碼按鈕倒計時功能
  • 簡單實現vue驗證碼60秒倒計時功能

相關文章

  • vue+vant實現商品列表批量倒計時功能

    vue+vant實現商品列表批量倒計時功能

    最近因為一個項目需要用到商品批量倒計時,當時使用vant封裝好的組件CountDown編寫 起初不知道“timeData”這個對象只需要傳time的時間戳就可以自動生成,走了一大
    2020-01-16

最新評論

买宝宝用品赚钱吗 北京配资公司 河南22开奖结果今天 贵州十一选五全部查看 北京快三开奖 2019上证年线 天津快乐十分前三组遗漏走势图 中山股票配资 广东11选5开奖信息 免费一码大公开 福建11选5遗漏 体彩内部员工揭秘11选5 极速11选5是哪办的 十一选五技巧高招北京 股票软件股票 浙江十一选五走势分布图 开元935棋牌下载安装