vue 页面多个倒计时

一个页面多个定时器，刚接到这个需求的时候，我觉着这不是简简单单，一写下来，懵了

一直在找资料（以我这个才智，找到了也看不懂），某一个时刻突发奇想，搞了个demo，给各位有这个需求的提供个思路

一般开始的时间戳都是后端返回的，这里就是模拟一下

如果后端返回的是（xxxx-xx-xx xx:xx:xx）就使用+new Date(xxxx-xx-xx xx:xx:xx)转一下就好

list:[{timeA: 1658325600000},{timeA: 1658329200000},{timeA: 1658331494000},]

倒计时

我这里时分秒是分开了，因为我这要分开写一些样式，没有需求的话，写一起拼起来就好

       setTimeH(starttime) {let nowTime = +new Date()let times = (starttime - nowTime) / 1000let h =  Math.floor(times / 60 /60 % 24)return  h < 10 ? '0' + h : h},setTimeM(starttime) {let nowTime = +new Date()let times = (starttime - nowTime) / 1000let m = Math.floor(times / 60 % 60)return m < 10 ? '0' + m : m},setTimeS(starttime) {let nowTime = +new Date()let times = (starttime - nowTime) / 1000let s = Math.floor(times % 60)return s < 10 ? '0' + s : s},

定时器执行

       ...调接口获取数据后执行， 这里就是演示一下setInterval(() => {this.list.forEach((val) => {this.$set(val, 'countDownH', this.setTimeH(val.timeA))this.$set(val, 'countDownM', this.setTimeM(val.timeA))this.$set(val, 'countDownS', this.setTimeS(val.timeA))});},1000)

template上就直接 for循环数据，例如

<div v-for="(item,index) in list" :key="index">{{ item.countDownH }}-{{ item.countDownM }}--{{ item.countDownS }}</div>

最后可以在vue （ beforeDestroy，destroyed）钩子里，销毁定时器

demo效果图

没搞动图，希望能给各位大佬提给点思路，这个方法有什么问题、错误，随时指正哦

vue 页面多个倒计时相关推荐

vue页面使用多个定时器
问题描述 vue页面使用多个定时器 html: <div class="prod-item"><ul><liv-for="(item, in ...
php加载外部html,VUE页面加载外部HTML实例详解
前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍了V ...
vue 页面闪烁的问题_vue页面加载闪烁问题的解决方法
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v- ...
vue页面跳转后返回原页面初始位置
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的 ...
简单实现vue验证码60秒倒计时功能
简单实现vue验证码60秒倒计时功能 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码< ...
SAP Cloud Application Programming bookshop 例子 Vue页面不能正常显示的原因分析
我在本地用cds run 命令启动 SAP Cloud Application Programming 应用后,访问如下 url: http://localhost:4004/vue/index.ht ...
Vue页面骨架屏（一）
在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...
Vue 页面如何利用生命周期函数监听用户预览时长
最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长.初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加 ...
Vue 页面如何监听用户预览时间
最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长.初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加 ...

vue 页面多个倒计时

vue 页面多个倒计时相关推荐

最新文章

热门文章