在表格中展示订单的倒计时定时器，用一个定时器显示多个倒计时

最新推荐文章于 2024-05-29 18:29:51 发布
最新推荐文章于 2024-05-29 18:29:51 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： vue 文章标签： 前端 javascript 开发语言 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jaychou976/article/details/122728256
版权
本文介绍了使用Vue框架在前端实现订单列表中待支付订单的倒计时功能。通过定时器更新数据，利用Vue的数据驱动视图特性，实现实时显示多个倒计时。在mounted生命周期钩子中启动定时器，并在updateOrderTime方法中处理时间与数据的更新。文章还提到未解决的问题，如如何在不清除所有倒计时的情况下处理订单状态的变化。
摘要由CSDN通过智能技术生成

问题背景

项目中有个需求是要展示订单列表中待支付的订单显示倒计时，在订单支付后，或者 超时后刷新列表，更新状态

解决思路

项目使用的vue框架，就要运用vue的数据驱动试图这一特性，所以我们需要添加一个定时器，在定时器中去改变页面上展示的数组的数据，只要数据变了，页面上的展示就变了，定时器每隔一秒，就会变更一下页面数据，就达到了我们想要的效果

先看下效果在这里插入图片描述

图片中只展示了一条带支付，实际情况中可能有多条待支付，也就是说要展示多个倒计时的显示

实现方式

一、请求接口数据，得到数据后存在一个数组里
getOrderList(){
	this.curOrderList = res.data  || []
}
二，在mounted里调用定时器，这里注意this.timer是在data中，初始为null
<
最低0.47元/天 解锁文章
jaychou0320
关注
专栏目录
order_timer:订单计时器_下单结算倒计时
06-25
order_timer 这是一个下单后等待结算倒计时的计时器程序，前端使用js进行倒计时显示，后端开辟新的线程进行倒计时及定时相关操作 程序原理 java.util包中提供了两个非常有用类Timer 、TimerTask。 Timer类用来安排任务工作,TimerTask用来实现任务工作； 我们可以通过下面来实现一个定时任务： 1、定义一个实现了TimerTask的自定义类MyTimerTask(别忘了实现父类中的抽象方法run())，并创建一个实例mytask. 2、创建Timer的一个实例：Timer mytimer= new Timer(); 3、安排执行：mytimer.schedule(mytask,80000,50000). 好了,这个任务会在启动8秒后执行,以后每隔5秒执行一次.
Jquery订单列表的批量倒计时实现
04-12
NULL 博文链接：https://itxiaohu.iteye.com/blog/1706657
订单列表倒计时
weixin_30485291的博客
09-16 607
订单列表倒计时 参考链接 未支付订单倒计时 Page({ /** * 页面的初始数据 */ data: { listData: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let list = [ { id: 1, ...
react实现table数据倒计时，前提是当天的数据才倒计时
最新发布
aaaaa11111_1的博客
05-29 553
let firstDate = dateFormat(curDate,'yyyy-mm-dd')//dateFormat方法不做说明。timeLeft = '失效时间：' + (difference as any) + '天后失效'// console.log('倒计时的时间',now.getTime());// 时间差（毫秒）
订单列表多个倒计时(vue+js)
coldriversnow的专栏
12-02 1740
实现场景：订单列表中多个倒计时（vue） 代码部分 <template> <div class=""> <div v-for="(item,index) in list" :key="index">{{item.countDownTime }}</div> </div> </template> <script> export default { data() { return {
订单时间倒计时
aoxiaochun1220的博客
02-01 648
<div class="waitTime-right">剩余：59分59秒</div> var endtime = Date.parse("2019-02-02 09:55:00"); //提交订单的时间 var now = Date.parse(new Date()); //现在时间 var end = Date.parse(n...
倒计时 羽睿倒计时定时器 v1.3 Build16.3.29 免费版
10-28
这个文件名可能是软件安装程序或更新包，用于下载并安装或升级到羽睿倒计时定时器的最新版本。用户只需下载并运行此文件，即可轻松完成软件的安装或更新，享受最新的功能和服务。 总结来说，羽睿倒计时定时器凭借其...
1-99分钟倒计时计数计时器60进制计数器倒计时定时器等6个计时器Multisim仿真实例.zip
04-25
倒计时计时器是一种从预设数值开始向下递减计数直至零的计时装置，通常用在定时任务或提醒功能中。这里的实例提供了1-99分钟的范围，这涵盖了日常生活和工作中常见的计时需求。计时器的核心部分通常由计数器和显示...
倒计时数显定时器
02-03
倒计时数显定时器因其直观、便捷的特点，在多个领域有着广泛的应用： 1. **日常生活**：厨房定时烹饪、健身计时等。 2. **科研实验**：精确控制化学反应的时间、生物学实验中的培养时间控制等。 3. **工业生产**：...
倒计时定时器multisim仿真源文件
11-19
总结来说，这个倒计时定时器的Multisim仿真源文件是一个很好的学习资源，它涵盖了数字逻辑电路、计数器工作原理、触发器应用以及电路仿真技术等多个方面的知识点。对于电子工程学生或爱好者来说，通过这个项目可以...
vue 实现多个列表倒计时
jd_gogogo的博客
02-06 2042
1.计算现在距离到期还有多长时间方法 function countDownFun(time) { let nowTime = new Date().getTime(); //现在时间 if (nowTime <= time) { //获取时间差 let timediff = Math.round((...
vue组件 - 实现时间倒计时效果（多数据、多个倒计时处理）
三季雨
01-05 2691
效果 创建文件showTime.js 用于处理 时间 // 倒计时 var day = 0 var hour = '00' var min = '00' var second = '00' function countTime (timeSrt) { // 获取当前时间 let date = new Date() let now = date.getTime() // 设置截止时间 let endDate = new Date(timeSrt) // 需要倒
uniapp订单循环列表倒计时
m0_49714202的博客
10-17 694
uniapp订单循环列表倒计时
订单倒计时（15 分钟 30 分钟 ...等等）
ppfxdj的博客
11-21 2472
Vue 方法 <p><span id="timer">{{msg}}</span></p> data（）{ creatime:'', // 开始时间 daoTim:'', // 倒计时时间 msg:'', } // 请求后台接口 获取他的下单时间‘2019-10-18 11:15:00 以及多长时间过期 ‘15/分钟 或者 30分钟...
SSM综合项目实战（TTSC） -- day13 订单、定时器Quartz
wingzhezhe的博客
10-31 1218
一、实现跳转订单结算页面 二、创建订单服务 三、实现订单功能 四、Quartz定时任务 五、实现定时删除无效订单
小程序、uniapp实现订单列表倒计时功能
baidu_35290582的博客
07-19 1708
循环定时器的使用
vue表格给数据添加倒计时
aborde的博客
09-26 1073
rest(row) { let time = row.restTime if (time >= 0) { let t = time / 1000; const m = Math.floor(t / 60); const s = Math.floor(t - m * 60); if (m >= 0 && (m
vue实现el-table表格每行进行单独点击倒计时
m0_57997609的博客
01-13 790
【代码】vue实现el-table表格每行进行单独点击倒计时。
倒计时定时器设计改进与Multisim仿真教程
在这份资源中，"倒计时定时器（改进）.ms10"文件是使用Multisim软件创建的一个仿真实例源文件。Multisim是National Instruments公司开发的一款电子电路仿真软件，广泛用于电子学和电路设计教学中。该软件可以模拟...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值