• 售前

  • 售后

热门帖子
入门百科

vue实现秒杀倒计时组件

[复制链接]
昀离936 显示全部楼层 发表于 2021-10-26 14:08:23 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了vue实现秒杀倒计时组件的详细代码,供大家参考,详细内容如下
下面是使用Vue实现秒杀倒计时组件

开发思绪

1.请求服务器获取这一刻的服务器时间(同一以服务器时间为基准)
2.获取用户当前电脑时间与服务器时间比对,获取时间差。以当前电脑时间-减去时间差为终极时间(界说为服务器当前时间)
3.设置秒杀开始时间
4.秒杀时间与服务器当前时间比对,获取时间差(共X秒)
5.根据X秒盘算出离秒杀开始时间尚有x天x小时x分钟x秒

代码实现

下面代码只展示第4、第5步骤
组件CountDown.vue
  1. <template>
  2.   <div>
  3.       <input type="datetime-local" :min="currentTime" placeholder="请输入秒杀开始时间" v-model="startTime">
  4.       <button @click="submit">开始计时</button>
  5.   </div>
  6.   <div>
  7.       <h1>{{ countDownTime }}</h1>
  8.   </div>
  9. </template>
  10. <script>
  11. let timer = null;
  12. let tipTextPrefix = '离秒杀开始还有: ';
  13. import moment from "moment";
  14. export default {
  15.     name: 'CountDown',
  16.     data() { return {
  17.         currentTime: moment().format('YYYY-MM-DDTHH:mm'), // 请使用步骤1-3计算出来的服务器时间
  18.         startTime: moment().format('YYYY-MM-DDTHH:mm'),
  19.         countDownTime: tipTextPrefix + '0天 0小时 0分钟 0秒'
  20.     }},
  21.     methods: {
  22.         submit: function() {
  23.             const _this = this;
  24.             clearInterval(timer);
  25.             timer = setInterval(() => {
  26.                 _this.countDownTime = _this.countDown();
  27.             }, 1000);
  28.         },
  29.         countDown: function() {
  30.             console.log(this.startTime);
  31.             const seconds = moment(this.startTime).diff(new Date, 'seconds');
  32.             if (seconds <= 0) {
  33.                 clearInterval(timer);
  34.                 return '秒杀已开始';
  35.             }
  36.             const second = seconds%60;
  37.             const minutes = (seconds-second) / 60;
  38.             const minute = minutes%60;
  39.             const hours = (minutes-minute) / 60;
  40.             const hour = hours%24;
  41.             const day = (hours-hour) / 24;
  42.             const res = tipTextPrefix + day + '天 '+ hour + '小时 '+ minute + '分钟 '+ second + '秒 ';
  43.             return res;
  44.         }
  45.     },
  46. }
  47. </script>
  48. <style>
  49. </style>
复制代码
以上就是本文的全部内容,希望对大家的学习有所资助,也希望大家多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作