vue中实现订单支付倒计时

news/2025/2/14 5:35:25/

需求

创建订单后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.ppmy.cn/news/1033910.html

相关文章

推断统计中非参数检验之卡方检验、列联表分析和游程检验

一、(卡方检验):赛马比赛的赛道会影响成绩吗 这里以一个实例赛马比赛的赛道是否会影响成绩为例,实际就是检验获胜频数与期望频数之间有无显著性差异。 import pandas as pdstep1 调用包 from scipy.stats import chisquare impor…

研究机构:PayPal稳定币PYUSD有望成为「数字资产」的重要用例

作者:Greg Cipolaro,NYDIG 全球研究主管 编译:WEEX 唯客 本文主要探讨两个话题:1. 过去两周,Crypto ETF 的申请数量激增,它们的审核流程是怎样的?2. 金融科技巨头 PayPal 已推出自己的稳定币 PY…

NPCon:AI模型技术与应用峰会北京站 (参会感受)

8月12日,我有幸参加了在北京皇家格兰云天大酒店举行的“AI模型技术与应用峰会”。 这次会议邀请了很多技术大咖,他们围绕: 六大论点 大模型涌现,如何部署训练架构与算力芯片 LLM 应用技术栈与Agent全景解析 视觉GPU推理服务部署 …

[笔记] libpcap编译及使用

文章目录 前言libpcap库安装安装编译./configure 时 报错:Neither flex nor lex was found libpcap库使用总结 前言 官网 libpcap库安装 环境: centos 7.9 安装编译 libpcap 下载 tar -zxvf libpcap-1.10.4 cd libpcap-1.10.4 ./configure make &am…

设置返回列表元素上限

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧?拾陆楼知识星球入口 在get_cell ,get_nets,get_xx等操作时返回的值上限是100,后面的就用...省略了,如果要修改这个上限,需要用下面命令: s…

海归事迹|记斯坦福大学博士后王成坤

王成坤,国内博士毕业后即赴美国斯坦福大学从事5年博士后研究,期间累计发表SCI论文23篇,总影响因子300,授权专利6项。现为南京医科大学高层次引进人才、教授、博士研究生导师、独立学术带头人。本期知识人网小编特做介绍。 百度百科…

ROS2 学习(二)工作空间,节点

工作空间介绍 workspace 是存放整个项目的大目录。 其中包含: src:源码。 build:编译文件。 install:安装空间,存放编译成功后的目标文件。 log:日志。 我们新建一个工作空间目录,其中包…

麦肯锡发布《2023科技趋势展望报告》,生成式AI、下一代软件开发成为趋势,软件测试如何贴合趋势?

近日,麦肯锡公司发布了《2023科技趋势展望报告》。报告列出了15个趋势,并把他们分为5大类,人工智能革命、构建数字未来、计算和连接的前沿、尖端工程技术和可持续发展。 类别一:人工智能革命 生成式AI 生成型人工智能标志着人工智…