vue+vant实现商品列表批量倒计时功能


Posted in Javascript onJanuary 13, 2020

最近因为一个项目需要用到商品批量倒计时,当时使用vant封装好的组件CountDown编写

vue+vant实现商品列表批量倒计时功能

起初不知道“timeData”这个对象只需要传time的时间戳就可以自动生成,走了一大波弯路,现在想想也是醉了

vue+vant实现商品列表批量倒计时功能

最开始写这个倒计时的时候没有考虑到使用当前服务器时间问题,只获取了本地时间 new Date().getTime(),然后发现这个不行,只要用户修改下手机本地时间,这个倒计时就不行了,有安全隐患,在网上也搜了一些相关知识,但都不尽人意,故想写这一篇文章避免大家再走我之前的弯路!

废话不多少说,上代码

html:

vue+vant实现商品列表批量倒计时功能

js:

vue+vant实现商品列表批量倒计时功能

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, '/')为兼容苹果时间显示问题)

vue+vant实现商品列表批量倒计时功能

2、其中skl_arr[i].nowdate_time是服务器当前时间,skl_arr[i].end_time商品倒计时结束时间,skl_arr[i].curTime是自己定义的一个字段,用于上述html中的:time="item.curTime"​​​​​​​使用

3、最后在倒计时结束后调用结束回调函数,用于更新按钮,文字状态,变成已结束状态

 vue+vant实现商品列表批量倒计时功能

css样式就不上传了,最后结果如下

vue+vant实现商品列表批量倒计时功能

总结

以上所述是小编给大家介绍的vue+vant实现商品列表批量倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
FCK调用方法..
Dec 21 Javascript
js 目录列举函数
Nov 06 Javascript
js function定义函数使用心得
Apr 15 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
JS表格的动态操作完整示例
Jan 13 #Javascript
JavaScript实现模态对话框实例
Jan 13 #Javascript
JS动态图片的实现方法完整示例
Jan 13 #Javascript
js实现拖动缓动效果
Jan 13 #Javascript
Vue.js中的高级面试题及答案
Jan 13 #Javascript
深入理解redux之compose的具体应用
Jan 12 #Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 #Javascript
You might like
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
php文件上传的两种实现方法
2016/04/04 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
php实用代码片段整理
2016/11/12 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
layui表格数据重载
2019/07/27 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
夯基础之手撕javascript继承详解
2020/11/09 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
jupyter实现重新加载模块
2020/04/16 Python
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
班队活动设计方案
2014/01/30 职场文书
2014年三万活动总结
2014/04/26 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
2014年调度员工作总结
2014/11/19 职场文书
医院感染管理制度
2015/08/05 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
2019年工作总结范文
2019/05/21 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python