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 相关文章推荐
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
Jquery使用val方法读写value值
May 18 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
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 array_push 数组函数
2009/12/26 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python运算符重载用法实例分析
2015/06/01 Python
Python引用模块和查找模块路径
2016/03/17 Python
Python中模块string.py详解
2017/03/12 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python lxml中etree的简单应用
2019/05/10 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python实现FTP文件传输的实例
2019/07/07 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
租赁协议书范本
2014/04/22 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
献爱心活动总结
2014/05/07 职场文书
婚前协议书范本
2014/10/27 职场文书
学生保证书
2015/01/16 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
MySQL 时间类型的选择
2021/06/05 MySQL
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle