vue中实现订单支付倒计时

news2024/10/5 20:27:37

需求

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

在这里插入图片描述

实现

思路:

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

代码实现:

data(){
	return {
		minutes: '', //倒计时分钟
		seconds: '', //倒计时秒
		isEnd: false, //支付超时
	}
}
methods: {
        // 倒计时
        countDown(){    
            let createTime = new Date()  //开始时间(订单创建时间)
            let endTime = new Date(); 
            endTime.setMinutes(endTime.getMinutes() + 15) // 结束时间,获取创建订单15分钟后的时间

            // 两个日期相差的时间戳,以毫秒为单位(1000ms = 1s)
            let totalTime = endTime - createTime

            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 = minutes
                    this.seconds = seconds

                    totalTime -= 1000;
                    console.log(totalTime)
                } else {
                    clearInterval(timer); // 停止调用函数 
                    this.isEnd = true
                }
            }, 1000);
        },  
}

拓展

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

//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.coloradmin.cn/o/879888.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

春秋云镜 CVE-2021-41947

春秋云镜 CVE-2021-41947 Subrion CMS v4.2.1 存在sql注入 靶标介绍 Subrion CMS v4.2.1 存在sql注入。 启动场景 漏洞利用 exp http://localhost/panel/visual-mode.json?getaccess&typeblocks UNION ALL SELECT username, password FROM sbr421_members -- -&o…

Vue学习之条件渲染

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>条件渲染</title><!--引入Vue--><script type"text/javascript" src"../vue.js"></script></head><body><!--…

Qt 屏幕偶发性失灵

项目场景: 基于NXP i.mx7的Qt应用层项目开发,通过goodix使用触摸屏,走i2c协议。 问题描述 触摸屏使用过程中意外卡死,现场分为多种: i2c总线传输错误,直观表现为触摸屏无效,任何与触摸屏挂接在同一总线上的i2c设备,均受到干扰,并且在传输过程中内核报错以下代码: G…

MAC环境,在IDEA执行报错java: -source 1.5 中不支持 diamond 运算符

Error:(41, 51) java: -source 1.5 中不支持 diamond 运算符 (请使用 -source 7 或更高版本以启用 diamond 运算符) 进入设置 修改java版本 pom文件中加入 <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin&l…

常见侧信道攻击方法

侧信道攻击方法需要采集到密码设备的能量泄露信息然后建立对应的能量消耗模型&#xff0c;之后使用特定的攻击方法来破解密钥。常见的侧信道攻击方法有简单能量&#xff08;或电磁&#xff09;攻击&#xff08;SPA&#xff09;、差分功耗&#xff08;或电磁&#xff09;攻击&am…

idea打jar包

目录 1、打包设置 2、打包介绍 3、开始打包 1、打包设置 先设置要打包的模块信息&#xff0c;即打包进去的内容。如下图所示&#xff1a;File --> Project Structure --> Artifacts&#xff0c;点击&#xff0b;号完成模块创建&#xff0c;其中有两种方式&#xff1a;…

【C++】STL---vector

STL---vector 一、vector 的介绍二、vector 的模拟实现1. 容量相关的接口&#xff08;1&#xff09;size&#xff08;2&#xff09;capacity&#xff08;3&#xff09;reserve&#xff08;4&#xff09;resize&#xff08;5&#xff09;empty 2. [] 重载3. 迭代器4. 修改数据相…

【二开】jeecgboot 开发过程方法扩展二开整理

【二开】jeecgboot 开发过程方法扩展二开整理 org.jeecg.modules.system.controller.CommonController#upload 可以二开统一文件上传 返回值增加文件大小 跟文件名称 //自定义 图片前缀savePath jeecgBaseConfig.getUploadRequestHost() savePath;if(oConvertUtils.isNotEm…

选择任务管理软件:哪个更适合你的需求?

随着互联网的发展&#xff0c;知识管理是可以成为企业获得更大发展前景的神兵利器&#xff0c;任务协同&#xff0c;是服务于中小型团队&#xff0c;或者大型机构的终端组织。来看看这款国外流行的任务管理软件Zoho Projects。 任务管理是企业协同的重要组成部分。 任务管理是企…

如何正确下载tomcat???

亲爱的小伙伴&#xff0c;千万别再去找下网站下载啦&#xff0c;这样詪容易携带病毒。 我们去官方网址下载。 Apache Tomcat - Welcome! 最后下载解压即可。。。

免费机器人来了(基于有限状态机),快来体验下

免费有限状态机机器人来了,快来体验下 51jiqiren.cn 五分钟就可以完成一个简单的机器人. 懂json的同学可以自定义状态和状态跳转,完成复杂的业务流程. 更多功能还在开发中. 网站右下角点"联系客服"截图: 弹出来了: 后端管理界面: 有限状态机界面: 数据界面: 在网…

论文复现--关于单视角动作捕捉工具箱--MMHuman3d的研究(基于Windows10和Linux18.04中配置)

分类&#xff1a;动作捕捉 github地址&#xff1a;https://github.com/open-mmlab/mmhuman3d 所需环境&#xff1a; Windows10&#xff0c;CUDA11.6&#xff0c;conda 4.13.0&#xff0c;Visual Studio 2017&#xff1b; Ubuntu18.04&#xff0c;conda22.9.0&#xff0c;CUDA11…

企业网盘 vs 传统存储设备:为何云存储成为首选?

企业网盘的出现为企业提供了新的存储方式&#xff0c;相较于传统的存储设备&#xff0c;为何越来越多的企业选择了云存储呢&#xff1f; 一、存储成本 在企业数据存储方面&#xff0c;成本是企业重要的考量因素。企业网盘是基于云存储技术的存储工具&#xff0c;因此它比传统的…

算法(第4版)练习题 1.1.27 的三种解法

本文列举了对于 算法 : 第4版 / (美) 塞奇威客 (Sedgewick, R.) , (美) 韦恩 (Wayne, K.) 著 ; 谢路云译. -- 北京 : 人民邮电出版社, 2012.10 (2021.5重印)&#xff08;以下简称原书或书&#xff09;中的练习题 1.1.27 的三种解法&#xff08;C 实现&#xff09;&#xff0c;并…

朴素贝叶斯(右心室肥厚的辅助识别)

现在我们判断右心室是否肥厚通常的做法都是借助心电图来识别&#xff0c;左侧的是右心室肥厚的&#xff0c;右侧的是右心室厚度正常&#xff0c;那接下来就要按照给出的图像来处理特征&#xff0c;提取出正常组和肥厚组的不同特征。 根据上图我们可以得出通过图像提取出了年龄…

〔AI 绘画〕Stable Diffusion 之 VAE 篇

✨ 目录 &#x1f388; 什么是VAE&#x1f388; 开启VAE&#x1f388; 下载常见的VAE&#x1f388; 对比不同VAE生成的效果 &#x1f388; 什么是VAE VAE&#xff1a;是 Variational Auto-Encoder 的简称&#xff0c;也就是变分自动编码器可以把它理解成给图片加滤镜&#xff…

KCC@深圳开源读书会即将举办,来与行业大咖面对面交流

KCC&#xff0c;全称 KAIYUANSHE City Community&#xff08;中文&#xff1a;开源社城市社区&#xff09;是由开源社发起&#xff0c;旨在让开源社区在每个城市落地生根的地域性开源组织。 自2023年2月份发起以来&#xff0c;我们已经在南京、上海、深圳、北京、硅谷、新加坡、…

WebRTC | ICE详解

目录 一、Candidate种类与优先级 二、ICE策略 1. iceServers 2. iceTransportPolicy 三、P2P连接 1.Nat类型 &#xff08;1&#xff09;完全锥型NAT &#xff08;2&#xff09;IP限制锥型NAT &#xff08;3&#xff09;端口限制锥型NAT &#xff08;4&#xff09;对称…

HCIP的MPLS实验

题目 拓扑图 IP地址及环回配置 注&#xff1a;R2的g0/0/1口和g0/0/2口还有R4的g0/0/0口和g0/0/2口都先不配置IP&#xff0c;因为后面这些接口的IP需要放入vpn空间中 R1 <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]sysname r1 [r1]int l0 […

《Linux从练气到飞升》No.13 Linux进程状态

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…