vue设计一个倒计时秒杀的组件详解


Posted in Javascript onApril 06, 2019

简介:

倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的

核心思路:

  1. 1、时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 
  2. 2、开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加,
  3. 3、在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束,
  4. 4、在更新时间的函数中是否开始和结束,
  5. 5、在computed钩子中监听disable 确定按钮是否可点击
  6. 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>

以上所述是小编给大家介绍的vue设计一个倒计时秒杀的组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
js字符串处理之绝妙的代码
Apr 05 #Javascript
微信小程序自定义导航栏实例代码
Apr 05 #Javascript
Node.js事件的正确使用方法
Apr 05 #Javascript
利用Node.js如何实现文件循环覆写
Apr 05 #Javascript
详解JavaScript栈内存与堆内存
Apr 04 #Javascript
jQuery中实现text()的方法
Apr 04 #jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 #jQuery
You might like
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
文本加密解密
2006/06/23 Javascript
prototype class详解
2006/09/07 Javascript
js类中的公有变量和私有变量
2008/07/24 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
Javascript中prototype的使用详解
2016/06/18 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JS作用域深度解析
2016/12/29 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
Python pickle模块用法实例
2015/04/14 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python 实现dict转json并保存文件
2019/12/05 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
法定代表人授权委托书范文
2014/08/02 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
二人合伙经营协议书
2014/09/13 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android