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 相关文章推荐
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
vue实现拖拽效果
Dec 23 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
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 特殊字符处理函数
2008/09/05 PHP
php中define用法实例
2015/07/30 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
浅析TypeScript 命名空间
2020/03/19 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python模块WSGI使用详解
2018/02/02 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
农场厂长岗位职责
2013/12/28 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
考试后的感想
2015/08/07 职场文书
关于开学的感想
2015/08/10 职场文书
小学记事作文之200字
2019/08/06 职场文书