基于vue开发秒杀倒计时功能的思路和代码是什么-群英

上一篇：小程序中自定义单选和多选效果的代码是什么下一篇：小程序登录界面的实现代码怎样写？

这篇文章我们来了解“基于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 >