当前位置: 首页 > news >正文

vue中实现订单支付倒计时

需求

创建订单后15分钟内进行支付,否则订单取消。

在这里插入图片描述

实现

思路:

获取当前时间和支付超时时间(在创建时间的基础上增加15分钟即为超时时间,倒计时多久根据自己的实际需求,这里为15分钟),支付超时时间减去当前时间获取间隔的毫秒数(ms,1s = 1000ms),若为负数则表示订单超时,若为正数表示未超时,然后利用 setInterval 每过一秒间隔时间 -1000,当间隔时间小于等于0时,倒计时结束支付超时,取消订单。

代码实现:

data(){return {minutes: '', //倒计时分钟seconds: '', //倒计时秒isEnd: false, //支付超时}
}
methods: {// 倒计时countDown(){    // 当前时间let nowTime = new Date()// 获取创建订单15分钟后的时间,this.payForm.create_time:订单创建时间let endTime = new Date(this.payForm.create_time);endTime.setMinutes(endTime.getMinutes() + 15) // 结束时间,获取创建订单15分钟后的时间// 两个日期相差的时间戳,以毫秒为单位(1000ms = 1s)let totalTime = endTime - nowTime// 结束时间大于现在的时间if(totalTime>0){let timer = setInterval(() => {if (totalTime >= 0) {//获取分钟数let minutes = Math.floor((((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60);//获取秒数let seconds = Math.floor((((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) % 60).toString().padStart(2, "0");;this.minutes = minutesthis.seconds = secondstotalTime -= 1000;// console.log(totalTime)} else {clearInterval(timer); // 停止调用函数 this.isEnd = true}}, 1000); }else{this.isEnd = true}  
}

拓展

上面案例只需要进行分钟及秒的计算,倒计时时间长点的话可能会涉及到天数及小时数的计算,思路与上面案例相同,了解天数及小时数的时间戳转换公式即可,码代如下。

//totalTime: 时间间隔,单位ms
let totalTime = endTime - createTime
//获取天数
let day = Math.floor(totalTime / 1000 / 3600 / 24);
//获取小时数
let h = Math.floor((totalTime % (3600 * 24 * 1000)) / 1000 / 3600);
http://www.lryc.cn/news/124416.html

相关文章:

  • 途乐证券-新手炒股快速入门教程?
  • 【冒泡排序及其优化】
  • TypeScript 泛型的深入解析与基本使用
  • 【Terraform学习】保护敏感变量(Terraform配置语言学习)
  • 海国图志#1:这一周难忘瞬间,吐血整理,不得不看
  • 【Android】okhttp爆java.lang.IllegalStateException: closed的解决方法
  • Django之定时任务--apscheduler
  • Spring Boot 项目应用消息服务器RabbitMQ(简单介绍)
  • HBuilderX
  • C数据结构与算法——常见排序算法时间复杂度比较 应用
  • C++并发多线程--死锁问题及解决方法
  • 【Spring】纯注解开发
  • 【算法心得】正确估计dfs时间复杂度;剪枝优化不怕重构
  • 通过网关访问微服务,一次正常,一次不正常 (nacos配置的永久实例却未启动导致)
  • div输入框的文字超过指定行数用省略号表示css
  • STM32 F103C8T6学习笔记5:定时器输出不同占空比PWM驱动舵机旋转角度
  • 液体神经网络:LNN是个啥概念?
  • 开源数据库Mysql_DBA运维实战 (DCL/日志)
  • 神经网络基础-神经网络补充概念-03-逻辑回归损失函数
  • 基于深度信念神经网络的矿石产量预测,基于DBN的矿石产量预测,DBN的详细原理
  • JavaWeb-Filter过滤器
  • python如何实现1ms内触发两个接口请求
  • 深入解析路由与网络:网络的脉络
  • spring.HttpMessageNotReadableException: JSON parse error
  • 安全中间件的设计思路和简单实践
  • 试卷扫描成电子版方法分享,这个方法不要错过
  • 【PostgreSQL的CLOG解析】
  • 腾讯云国际站代充-阿里云ECS怎么一键迁移到腾讯云cvm?
  • 东方晶源亮相第十一届半导体设备年会,共话发展“芯”机遇
  • git修改历史commit信息