vue 设计一个倒计时秒杀的组件

番茄西红柿发布于2019-04-23 11:41 / 1029人阅读

摘要：简介倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪，我自己根据其他资料设计了一个版的核心思路时间不能是本地客户端的时间必须是服务器的时间这里用一个代替以为时间必须统一开始时间，结束时间通过父组件传入，当服务器时间在这个开始时间和结束

简介：

倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪，我自己根据其他资料设计了一个vue版的

核心思路：1、时间不能是本地客户端的时间必须是服务器的时间这里用一个settimeout代替以为时间必须统一

2、开始时间，结束时间通过父组件传入，当服务器时间在这个开始时间和结束时间的范围内参加活动按钮可以点击，并且参加过活动以后不能再参加，

　　　　　3、在组件创建的时候同步得到现在时间服务时间差，并且在这里边设置定时器，每秒都做判断看秒杀是否开始和结束，

　　　　　4、在更新时间的函数中是否开始和结束，

　　　　　5、在computed钩子中监听disable 确定按钮是否可点击

　　　　　6、参加过活动在updated中停止定时器的计时，页面销毁的时候也停止计时

　　　　下边是代码

　　　　子组件　　

父组件

用到moment的这个关于时间操作的库

GPU云服务器云服务器 php做秒杀的思路淘宝秒杀倒计时 vue组件 vue组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1010.html

Java高并发秒杀系统【观后总结】

摘要：项目简介在慕课网上发现了一个项目，内容讲的是高并发秒杀，觉得挺有意思的，就进去学习了一番。比如重复秒杀，秒杀关闭这些都是属于秒杀的业务。秒杀操作是与数据库的事务相关的，不能使用缓存来替代了。项目简介在慕课网上发现了一个JavaWeb项目，内容讲的是高并发秒杀，觉得挺有意思的，就进去学习了一番。记录在该项目中学到了什么玩意.. 该项目源码对应的gitHub地址（由观看其视频的人编写...

mengbo 2019-08-15 14:47 评论0 收藏0
有赞 WEB-UI 自动化实践

摘要：概述是由有赞开发的自动化工具，并以此实现了端和端的核心业务的自动化。旨在简化开源工具提供的接口，方便自动化测试用例的设计。元素定位自动化用例其实可以分成两部分，定位元素调用接口操作该元素。一台用于跑自动化用例的服务器。概述 Bee 是由有赞 QA 开发的 UI 自动化工具，并以此实现了 web 端和 wap 端的核心业务的自动化。旨在简化开源工具提供的接口，方便 UI 自动化测试用例...

h9911 2019-05-29 17:04 评论0 收藏0
秒杀系统架构如何设计之我见

摘要：即使秒杀系统崩溃了，也不会对网站造成影响。动态生成随机下单页面的为了避免用户直接访问下单需要将动态化，用随机数作为参数，只能秒杀开始的时候才生成。架构设计如何控制秒杀商品页面抢购按钮的可用禁用。该文件不被缓存的做法随机数。秒杀背景电商中为了吸引顾客、聚集人气，经常会策划一些秒杀活动。活动中售卖的商品，要么价格远低于市场价格，要么比较稀缺（如一些新发布的商品）。这些商品电商一般都会限...

zhunjiee 2019-08-06 13:28 评论0 收藏0