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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
jQuery表单验证之密码确认
May 22 jQuery
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
Python机器学习之决策树和随机森林
Jul 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
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
浅析vue深复制
2018/01/29 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
深入浅出vue图片路径的实现
2019/09/04 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Django xadmin安装及使用详解
2020/10/26 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
销售业务实习自我鉴定
2013/09/23 职场文书
航空大学应届生求职信
2013/11/10 职场文书
指导教师推荐意见
2015/06/05 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
搭建Yolov5服务器
2022/04/30 Servers