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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。

您可能感兴趣的文章:

• 解决vue项目本地启动时无法携带cookie的问题
• vue项目启动出现cannot GET /服务错误的解决方法
• Vue修改项目启动端口号方法
• 详解webpack打包vue项目之后生成的dist文件该怎么启动运行
• 详解VSCode配置启动Vue项目
• webpack+vue+express(hot)热启动调试简单配置方法
• vue-cli启动本地服务局域网不能访问的原因分析
• 详解vue express启动数据服务
• vue实现商品详情页功能之商品选项卡
• Vue2.0/3.0双向数据绑定的实现原理详解
• 如何启动一个Vue.js项目

本文由 华域联盟 原创撰写：华域联盟 » vue实现秒杀倒计时组件

转载请保留出处和原文链接：https://www.cnhackhy.com/59488.htm