编程 Javascript

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

Posted in Javascript onJanuary 13, 2020

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

起初不知道“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实现商品列表批量倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

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

- Author -

余温无痕

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用JavaScript编写COM组件的步骤

Mar 17 Javascript

JS中如何设置readOnly的值

Dec 25 Javascript

Iframe 自动适应页面的高度示例代码

Feb 26 Javascript

JS实现图片产生波纹一样flash效果的方法

Feb 27 Javascript

js实现的牛顿摆效果

Mar 31 Javascript

Bootstrap滚动监听（Scrollspy）插件详解

Apr 26 Javascript

动态设置form表单的action属性的值的简单方法

May 25 Javascript

AngularJS中watch监听用法分析

Nov 04 Javascript

基于JavaScript实现的快速排序算法分析

Apr 14 Javascript

解决IE7中使用jQuery动态操作name问题

Aug 28 jQuery

解决Jquery下拉框数据动态获取的问题

Jan 25 jQuery

Node.js创建HTTP文件服务器的使用示例

May 11 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面向对象程序设计方法实例详解

2016/12/24 PHP

PHP操作Redis常用技巧总结

2018/04/24 PHP

如何在Laravel5.8中正确地应用Repository设计模式

2019/11/26 PHP

javascript 三种编解码方式

2010/02/01 Javascript

30个最好的jQuery 灯箱插件分享

2011/04/25 Javascript

读jQuery之十三添加事件和删除事件的核心方法

2011/08/23 Javascript

JavaScript中的依赖注入详解

2015/03/18 Javascript

Bootstrap模态对话框的简单使用

2016/04/29 Javascript

jQuery读取XML文件的方法示例

2017/02/03 Javascript

jQuery实现复制到粘贴板功能

2017/02/11 Javascript

Angular.js与node.js项目里用cookie校验账户登录详解

2017/02/22 Javascript

Javascript实现base64的加密解密方法示例

2017/06/27 Javascript

浅谈angular.js跨域post解决方案

2017/08/30 Javascript

jquery实现上传文件进度条

2020/03/26 jQuery

javascript实现智能手环时间显示

2020/09/18 Javascript

[07:26]2015国际邀请赛第二日TOP10集锦

2015/08/06 DOTA

Python Web框架Pylons中使用MongoDB的例子

2013/12/03 Python

python基础教程之基本内置数据类型介绍

2014/02/20 Python

Python中列表(list)操作方法汇总

2014/08/18 Python

按日期打印Python的Tornado框架中的日志的方法

2015/05/02 Python

Python使用Redis实现作业调度系统(超简单)

2016/03/22 Python

Python制作钉钉加密/解密工具

2016/12/07 Python

selenium+python自动化测试之环境搭建

2019/01/23 Python

Python3enumrate和range对比及示例详解

2019/07/13 Python

基于Python安装pyecharts所遇的问题及解决方法

2019/08/12 Python

pyecharts调整图例与各板块的位置间距实例

2020/05/16 Python

科技开发中心办公室主任岗位责任制

2014/02/10 职场文书

物理力学求职信

2014/02/18 职场文书

电子装配专业毕业生求职信

2014/04/23 职场文书

2014年仓库工作总结

2014/11/20 职场文书

党支部2014年度工作总结

2014/12/04 职场文书

初中教师德育工作总结2015

2015/05/12 职场文书

小学思想品德教学反思

2016/02/24 职场文书

Linux安装Nginx步骤详解

2021/03/31 Servers

Python list去重且保持原顺序不变的方法

2021/04/03 Python

vue报错function () { [native code] }，无法出现我们想要的内容 Unknown custom element

2022/04/11 Vue.js