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 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
angularJS深拷贝详解
Mar 23 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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
数据库相关问题
2006/10/09 PHP
图书管理程序(三)
2006/10/09 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
jQuery实现手势解锁密码特效
2017/08/14 jQuery
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python实现TCP文件传输
2020/03/20 Python
python实现批量修改文件名
2020/03/23 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
C#的几个面试问题
2016/05/22 面试题
Python如何实现单例模式
2016/06/03 面试题
酒店开业庆典策划方案
2014/05/28 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers