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 相关文章推荐
深入理解Javascript作用域与变量提升
Dec 09 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
php之可变变量的实例详解
2017/09/12 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
深入讲解Python编程中的字符串
2015/10/14 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
幼儿园教师节演讲稿
2014/09/03 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
图书借阅制度范本
2015/08/06 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
MySQL 如何设计统计数据表
2021/06/15 MySQL