下面先给大家介绍下vue 设计一个倒计时秒杀的组件 ,具体内容如下所述:
简介:
倒计时秒杀组件在电商网站中层出不穷 不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的
核心思路:1、时间不能是本地客户端的时间 必须是服务器的时间这里用一个settimeout代替 以为时间必须统一
2、开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内 参加活动按钮可以点击,并且参加过活动以后不能再参加,
3、在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束,
4、在更新时间的函数中是否开始和结束,
5、在computed钩子中监听disable 确定按钮是否可点击
6、参加过活动在updated中停止定时器的计时,页面销毁的时候也停止计时
下边是代码
子组件
<template> <div> <button @click="handleClick" :disabled="disabled"> {{btnText}} </button> <span>{{tip}}</span> </div> </template> <script> import moment from 'moment' export default { name: "Spike", props: { startTime: { required: true, validator: (val) => { return moment.isMoment(val) } }, endTime: { required: true, validator: (val) => { return moment.isMoment(val) } } }, data() { return { start: false, end: false, done: false, tip: '', timeGap: 0, btnText:"" } }, computed: { disabled() { //当三个异号的时候disable返回真,不可点击, // 初始化通过this.updateState确定disable的状态 return !(this.start && !this.end && !this.done); } }, async created() { const serverTime=await this.getServerTime(); this.timeGap=Date.now()-serverTime;//当前时间和服务器时间差 this.updateState(); this.timeInterval=setInterval(()=>{ this.updateState() },1000) }, updated(){ if(this.end||this.done){ clearInterval(this.timeInterval) } }, methods: { handleClick() { alert("提交成功"); this.done=true; this.btnText="已参加过活动" }, getServerTime() { //模拟服务器时间 return new Promise((resolve, reject) => { setTimeout(() => { //当前时间慢10秒就是服务器时间 resolve(new Date(Date.now() -10 * 1000).getTime())//跟本地时间差 }, 0) }) }, updateState() { const now = moment(new Date(Date.now() - this.timeGap));//当前服务器时间 const diffStart=this.startTime.diff(now);//开始时间和服务器时间之差 const diffEnd=this.endTime.diff(now);//结束时间和服务器时间之差 if(diffStart<0){ this.start=true; this.tip="秒杀已开始"; this.btnText="参加" }else{ this.tip=`距离秒杀开始还剩${Math.ceil(diffStart/1000)}秒`; this.btnText="活动未开始"; } if(diffEnd<=0){ this.end=true; if( !this.btnText==="已参加过活动"||this.btnText==="参加"){ this.tip="秒杀已结束"; this.btnText="活动已结束"; } } } }, beforeDestroy() { clearInterval(this.timeInterval) } } </script> <style scoped> button[disabled]{ cursor: not-allowed; } </style>
父组件
<template> <div> <h1 style="color: red">设计一个秒杀倒计时的组件</h1> <Spike :startTime="startTime" :endTime="endTime"></Spike> </div> </template> <script> import Spike from './Spike' import moment from 'moment' export default { name: "index", components:{ Spike }, data(){ return{ endTime:moment(new Date(Date.now()+10*1000)), startTime:moment(new Date(Date.now())) } } } </script> <style scoped> </style>
用到moment的这个关于时间操作的库
下面紧接着给大家介绍小程序或者vue商品秒杀倒计时
最近做小程序商城。列表秒杀倒计时这个坑死了。还是借鉴网上大佬的方法
let goodsList = [{ actEndTime: '2018-06-24 10:00:43' }] let endTimeList = []; // 将活动的结束时间参数提成一个单独的数组,方便操作 this.data.mydata.rush.forEach(o => { endTimeList.push(o.actEndTime) }) this.setData({ actEndTimeList: endTimeList }); // 执行倒计时函数 this.countDown(); timeFormat(param) { //小于10的格式化函数 return param < 10 ? '0' + param : param; }, countDown(it) { //倒计时函数 // 获取当前时间,同时得到活动结束时间数组 let newTime = new Date().getTime(); let endTimeList = this.data.actEndTimeList; let countDownArr = []; // 对结束时间进行处理渲染到页面 endTimeList.forEach(o => { let endTime = new Date(o).getTime(); let obj = null; // 如果活动未结束,对时间进行处理 if (endTime - newTime > 0) { let time = (endTime - newTime) / 1000; // 获取天、时、分、秒 let day = parseInt(time / (60 * 60 * 24)); let hou = parseInt(time % (60 * 60 * 24) / 3600); let min = parseInt(time % (60 * 60 * 24) % 3600 / 60); let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { day: this.timeFormat(day), hou: this.timeFormat(hou), min: this.timeFormat(min), sec: this.timeFormat(sec) } } else { //活动已结束,全部设置为'00' obj = { day: '00', hou: '00', min: '00', sec: '00' } } countDownArr.push(obj); }) // 渲染,然后每隔一秒执行一次倒计时函数 this.setData({ countDownList: countDownArr }) setTimeout(this.countDown, 1000); }, <view class='item-money-name'> <view class='item-money'>¥{{item.money}}</view> <view class="tui-countdown-content {{(countDownList[index].day && countDownList[index].hou && countDownList[index].min && countDownList[index].sec) == 0?'tibg':''}}"> <text>剩余</text> <text class='tui-conutdown-box'>{{countDownList[index].day}}</text> <text>天</text> <text class='tui-conutdown-box'>{{countDownList[index].hou}}:</text> <text class='tui-conutdown-box'>{{countDownList[index].min}}:</text> <text class='tui-conutdown-box'>{{countDownList[index].sec}}</text> </view> </view>
countDownList: []
主要是将获取到的时间循环出来单独存一个数组。然后再倒计时。获取的时间和计算机的时间对比。
然后再每个商品的index下便可获取到每个倒计时了
总结
以上所述是小编给大家介绍的vue 实现倒计时秒杀的组件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
本文向大家介绍微信小程序实现团购或秒杀批量倒计时,包括了微信小程序实现团购或秒杀批量倒计时的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现批量倒计时的具体代码,供大家参考,具体内容如下 效果图 实现思路 微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染! JS 模拟商品列表数据 goodsList; 在 onLoad 周期函数中对活动结束时间进行提取; 建
本文向大家介绍JS实现商城秒杀倒计时功能(动态设置秒杀时间),包括了JS实现商城秒杀倒计时功能(动态设置秒杀时间)的使用技巧和注意事项,需要的朋友参考一下 一年一度的双十二如期而至,今天的你买买买了吗,下面小编给大家分享一个动态秒杀倒计时功能。 效果图 总结 以上所述是小编给大家介绍的JS实现商城秒杀倒计时功能(动态设置秒杀时间),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复
本文向大家介绍iOS实现秒杀活动倒计时,包括了iOS实现秒杀活动倒计时的使用技巧和注意事项,需要的朋友参考一下 IOS关于大型网站抢购、距活动结束,剩余时间倒计时的实现代码,代码比较简单,大家根据需求适当的添加修改删除代码 1.定义4个 Label 来接收倒计时: 2.在实现文件中实现方法: 3.在需要出使用: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍JS实现秒杀倒计时特效,包括了JS实现秒杀倒计时特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现秒杀倒计时特效的具体代码,供大家参考,具体内容如下 知识点 添加一个定时器,对时间标签不断进行更新设置即可。 引入工具库工具库 运行效果 代码 引入MyTool.js 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍js实现京东秒杀倒计时功能,包括了js实现京东秒杀倒计时功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现京东秒杀倒计时功能的具体代码,供大家参考,具体内容如下 首先给大家看看效果图,因为是做的移动端的,所以放大给大家看看局部就行: 关于实现京东秒杀,之前用过其他的方法,今天给大家分享一个原生的方法吧,不会很难. 1、倒计时页面结构: 2、css样式:这个是用
本文向大家介绍iOS中实现简单易懂秒杀倒计时/倒计时代码,包括了iOS中实现简单易懂秒杀倒计时/倒计时代码的使用技巧和注意事项,需要的朋友参考一下 示例代码简单易懂: 以上所述是小编给大家介绍的iOS中实现简单易懂秒杀倒计时/倒计时代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!
本文向大家介绍vue+vant实现商品列表批量倒计时功能,包括了vue+vant实现商品列表批量倒计时功能的使用技巧和注意事项,需要的朋友参考一下 最近因为一个项目需要用到商品批量倒计时,当时使用vant封装好的组件CountDown编写 起初不知道“timeData”这个对象只需要传time的时间戳就可以自动生成,走了一大波弯路,现在想想也是醉了 最开始写这个倒计时的时候没有考虑到使用当前服务器
本文向大家介绍Thinkphp5+Redis实现商品秒杀代码实例讲解,包括了Thinkphp5+Redis实现商品秒杀代码实例讲解的使用技巧和注意事项,需要的朋友参考一下 环境:wamp,redis 要求:安装WAMP,Redis,以及为PHP安装Redis扩展 秒杀功能大致思路:获取缓存列表的长度,如果长度(llen)等于0,就停止秒杀,即秒杀失败,如果长度大于0,则继续运行,先从缓存中移除一个