vue 实现小程序或商品秒杀倒计时


Posted in Javascript onApril 14, 2019

下面先给大家介绍下vue 设计一个倒计时秒杀的组件 ,具体内容如下所述:

简介:

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

核心思路:1、时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 

                 2、开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加,

 3、在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束,

 4、在更新时间的函数中是否开始和结束,

 5、在computed钩子中监听disable 确定按钮是否可点击

 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>

用到moment的这个关于时间操作的库

下面紧接着给大家介绍小程序或者vue商品秒杀倒计时

最近做小程序商城。列表秒杀倒计时这个坑死了。还是借鉴网上大佬的方法

let goodsList = [{
 actEndTime: '2018-06-24 10:00:43'
}]
let endTimeList = [];
// 将活动的结束时间参数提成一个单独的数组,方便操作
 this.data.mydata.rush.forEach(o => {
   endTimeList.push(o.actEndTime)
})
 this.setData({
   actEndTimeList: endTimeList
});
 // 执行倒计时函数
 this.countDown();
timeFormat(param) { //小于10的格式化函数
  return param < 10 ? '0' + param : param;
 },
 countDown(it) { //倒计时函数
  // 获取当前时间,同时得到活动结束时间数组
  let newTime = new Date().getTime();
  let endTimeList = this.data.actEndTimeList;
  let countDownArr = [];
  // 对结束时间进行处理渲染到页面
  endTimeList.forEach(o => {
   let endTime = new Date(o).getTime();
   let obj = null;
   // 如果活动未结束,对时间进行处理
   if (endTime - newTime > 0) {
    let time = (endTime - newTime) / 1000;
    // 获取天、时、分、秒
    let day = parseInt(time / (60 * 60 * 24));
    let hou = parseInt(time % (60 * 60 * 24) / 3600);
    let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
    let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
    obj = {
     day: this.timeFormat(day),
     hou: this.timeFormat(hou),
     min: this.timeFormat(min),
     sec: this.timeFormat(sec)
    }
   } else { //活动已结束,全部设置为'00'
    obj = {
     day: '00',
     hou: '00',
     min: '00',
     sec: '00'
    }
   }
   countDownArr.push(obj);
  })
  // 渲染,然后每隔一秒执行一次倒计时函数
  this.setData({
   countDownList: countDownArr
  })
  setTimeout(this.countDown, 1000);
 },
<view class='item-money-name'>
       <view class='item-money'>¥{{item.money}}</view>
       <view class="tui-countdown-content {{(countDownList[index].day && countDownList[index].hou && countDownList[index].min && countDownList[index].sec) == 0?'tibg':''}}">
        <text>剩余</text>
        <text class='tui-conutdown-box'>{{countDownList[index].day}}</text>
        <text>天</text>
        <text class='tui-conutdown-box'>{{countDownList[index].hou}}:</text>
        <text class='tui-conutdown-box'>{{countDownList[index].min}}:</text>
        <text class='tui-conutdown-box'>{{countDownList[index].sec}}</text>
       </view>
      </view>

countDownList: []

主要是将获取到的时间循环出来单独存一个数组。然后再倒计时。获取的时间和计算机的时间对比。

然后再每个商品的index下便可获取到每个倒计时了

总结

以上所述是小编给大家介绍的vue 实现倒计时秒杀的组件,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
解决vue移动端适配问题
Dec 12 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
js中async函数结合promise的小案例浅析
Apr 14 #Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 #Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 #Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 #Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 #Javascript
JS实现马赛克图片效果完整示例
Apr 13 #Javascript
ES6入门教程之let、const的使用方法
Apr 13 #Javascript
You might like
深入php之规范编程命名小结
2013/05/15 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
php中define用法实例
2015/07/30 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Python处理PDF与CDF实例
2020/02/26 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
小学数学国培感言
2014/03/10 职场文书
副处级干部考察材料
2014/05/17 职场文书
个人作风建设心得体会
2014/10/22 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
三十年同学聚会感言
2015/07/30 职场文书
大学生社会实践感想
2015/08/11 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书