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  THIS详解 面向对象
Mar 25 Javascript
jQuery入门知识简介
Mar 04 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
JavaScript实现图片轮播特效
Oct 23 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 开发工具
2006/12/06 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
vue-router单页面路由
2017/06/17 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python语言中有算法吗
2020/06/16 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
甜点店创业计划书
2014/01/27 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
租赁协议书范本
2014/04/22 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
财务工作检讨书
2014/10/29 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript