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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
简谈创建React Component的几种方式
2019/06/15 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
Python对列表排序的方法实例分析
2015/05/16 Python
python基本语法练习实例
2017/09/19 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
鸿星尔克广告词
2014/03/21 职场文书
普通话宣传标语
2014/06/26 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
西游降魔篇观后感
2015/06/15 职场文书
水浒传读书笔记
2015/06/25 职场文书
学校安全管理制度
2015/08/06 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python