怎么新建MySQL数据库
发布时间：2022-10-21
作者：admin
阅读：526
阅读：526
这篇文章我们来了解“基于vue开发秒杀倒计时功能的思路和代码是什么”的内容，小编通过实际的案例向大家展示了操作过程，简单易懂，有需要的朋友可以参考了解看看，那么接下来就跟随小编的思路来往下学习吧，希望对大家学习或工作能有帮助。
下面是使用Vue实现秒杀倒计时组件
开发思路
1.请求服务器获取这一刻的服务器时间（统一以服务器时间为基准）
2.获取用户当前电脑时间与服务器时间比对，获取时间差。以当前电脑时间-减去时间差为最终时间(定义为服务器当前时间)
3.设置秒杀开始时间
4.秒杀时间与服务器当前时间比对，获取时间差(共X秒)
5.根据X秒计算出离秒杀开始时间还有x天x小时x分钟x秒
代码实现
下面代码只展示第4、第5步骤
组件CountDown.vue
?< template > < div > < input type = "datetime-local" :min = "currentTime" placeholder = "请输入秒杀开始时间" v-model = "startTime" > < button @ click = "submit" >开始计时</ button > </ div > < div > < h1 >{{ countDownTime }}</ h1 > </ div > </ template > < script > let timer = null; let tipTextPrefix = '离秒杀开始还有： '; import moment from "moment"; export default { name: 'CountDown', data() { return { currentTime: moment().format('YYYY-MM-DDTHH:mm'), // 请使用步骤1-3计算出来的服务器时间 startTime: moment().format('YYYY-MM-DDTHH:mm'), countDownTime: tipTextPrefix + '0天 0小时 0分钟 0秒' }}, methods: { submit: function() { const _this = this; clearInterval(timer); timer = setInterval(() => { _this.countDownTime = _this.countDown(); }, 1000); }, countDown: function() { console.log(this.startTime); const seconds = moment(this.startTime).diff(new Date, 'seconds'); if (seconds <= 0) { clearInterval(timer); return '秒杀已开始'; } const second = seconds%60; const minutes = (seconds-second) / 60; const minute = minutes%60; const hours = (minutes-minute) / 60; const hour = hours%24; const day = (hours-hour) / 24; const res = tipTextPrefix + day + '天 '+ hour + '小时 '+ minute + '分钟 '+ second + '秒 '; return res; } }, } </ script > < style > </ style > |
这篇关于“基于vue开发秒杀倒计时功能的思路和代码是什么”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理