js实现多个倒计时并行 js拼团倒计时


Posted in Javascript onFebruary 25, 2019

本文是对类似于拼团,多个商品每个都有各自的倒计时,一开始接到接到这个需求也是头疼了一阵子,如果是在商品列表少的时候完全就可以写成死的,固定的变量,写几个定时器就ok了,

但是这次数据是活的,看一些拼团app都可以实现,既然能实现就搞起来,有了以下的想法 使用环境 vue

写一个准备渲染的死数据

data () {
 return {
  list: [ // 准备渲染的数据
   {
    remainTime: 900000, // 距离结束还有多久
    remainTimeStr: '' // 展示文案
   },
   {
    remainTime: 400000,
    remainTimeStr: ''
   },
   {
    remainTime: 60500,
    remainTimeStr: ''
   },
  ]
 }
}

百度copy一个倒计时的方法

countdowm (timestamp) {
 let self = this
 let timer = setInterval(function () {
  let nowTime = new Date()
  let endTime = new Date(timestamp)
  let t = endTime.getTime() - nowTime.getTime()
  if (t > 0) {
   let day = Math.floor(t / 86400000)
   let hour = Math.floor((t / 3600000) % 24)
   let min = Math.floor((t / 60000) % 60)
   let sec = Math.floor((t / 1000) % 60)
   hour = hour < 10 ? '0' + hour : hour
   min = min < 10 ? '0' + min : min
   sec = sec < 10 ? '0' + sec : sec
   let format = ''
   if (day > 0) {
    format = `${day}天${hour}小时${min}分${sec}秒`
   }
   if (day <= 0 && hour > 0) {
    format = `${hour}小时${min}分${sec}秒`
   }
   if (day <= 0 && hour <= 0) {
    format = `${min}分${sec}秒`
   }
   self.content = format
  } else {
   clearInterval(timer)
   self.content = 'over'
  }
 }, 1000)
}

捋清逻辑

首先, 根据逻辑对倒计时的方法进行更改,我们直接使用的就是距离结束还有多少时间的时间戳 ,我的思路是用一个定时器达到一个并行多个倒计时的思路,所以先将方法进行优化

  • 不需要获取时间
  • 也不需要一些时间计算
  • 因为是多个倒计时并行 所以清楚定时器的逻辑需要进行更改
countdowm (timestamp) {
 let self = this
 let timer = setInterval(function () {
  let t = timestamp
  if (t > 0) {
   let day = Math.floor(t / 86400000)
   let hour = Math.floor((t / 3600000) % 24)
   let min = Math.floor((t / 60000) % 60)
   let sec = Math.floor((t / 1000) % 60)
   day = day < 10 ? '0' + day : day
   hour = hour < 10 ? '0' + hour : hour
   min = min < 10 ? '0' + min : min
   sec = sec < 10 ? '0' + sec : sec
   let format = ''
   format = `${day}天${hour}小时${min}分${sec}秒`
   self.content = format
  } else {
   // clearInterval(timer)
   self.content = 'over'
  }
 }, 1000)
}

简化完毕, 把自己刚才的思路带进方法内

在定时器里 写一个循环 每次减少一秒 让当前数据内remainTime时间戳-1000

countdown () {
 let self = this
 let timer = setInterval(function () {
  for (let i = 0; i < self.list.length; i++) {
   self.list[i].remainTime -= 1000
   let t = self.list[i].remainTime
   if (t > 0) {
    let day = Math.floor(t / 86400000)
    let hour = Math.floor((t / 3600000) % 24)
    let min = Math.floor((t / 60000) % 60)
    let sec = Math.floor((t / 1000) % 60)
    day = day < 10 ? '0' + day : day
    hour = hour < 10 ? '0' + hour : hour
    min = min < 10 ? '0' + min : min
    sec = sec < 10 ? '0' + sec : sec
    let format = ''
    format = `距离结束:<b>${day}</b> 天 <b>${hour}</b> 
时 <b>${min}</b> 分 <b>${sec}</b> 秒`
    self.list[i].remainTimeStr = format
    } else {
    // 进行判断 如果数据内所有的倒计时已经结束,那么结束定时器, 如果没有那么继续执行定时器
    let flag = self.list.every((val, ind) => 
 
val.remainTime <= 0)
    if (flag) clearInterval(timer)
    self.list[i].remainTimeStr = `距离结束:<b>00</b> 天 
<b>00</b> 时 <b>00</b> 分 <b>00</b> 秒` // 结束文案
    }
  }
 }, 1000)
}

这样 并行多个定时器就做好了, 但是发现了一个问题 当你切换路由的时候 发下你的定时器如果未结束 他还在执行,这样对性能造成了一些影响, 虽说用户看不到,但是也要解决,提高用户浏览体验
在你切换页面的时候 使用vue中的生命周期函数把数据更改为0 就ok

destroyed () {
 this.list.forEach((val) => {
  val.remainTime = 0
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
Vuex实现购物车小功能
Aug 17 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 #Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 #Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 #Javascript
写一个Vue Popup组件
Feb 25 #Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 #Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 #Javascript
JavaScript中的事件与异常捕获详析
Feb 24 #Javascript
You might like
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
python中defaultdict的用法详解
2017/06/07 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
python实现顺序表的简单代码
2018/09/28 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Django-migrate报错问题解决方案
2020/04/21 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
关于有小孩的离婚协议书
2014/10/26 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers