亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能

 更新時(shí)間:2023年08月16日 09:55:43   作者:Jiang_JY  
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能,倒計(jì)時(shí)這要運(yùn)用在創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下

需求

創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消。

實(shí)現(xiàn)

思路:

獲取當(dāng)前時(shí)間和支付超時(shí)時(shí)間(在創(chuàng)建時(shí)間的基礎(chǔ)上增加15分鐘即為超時(shí)時(shí)間,倒計(jì)時(shí)多久根據(jù)自己的實(shí)際需求,這里為15分鐘),支付超時(shí)時(shí)間減去當(dāng)前時(shí)間獲取間隔的毫秒數(shù)(ms,1s = 1000ms),若為負(fù)數(shù)則表示訂單超時(shí),若為正數(shù)表示未超時(shí),然后利用 setInterval 每過一秒間隔時(shí)間 -1000,當(dāng)間隔時(shí)間小于等于0時(shí),倒計(jì)時(shí)結(jié)束支付超時(shí),取消訂單。

代碼實(shí)現(xiàn):

data(){
	return {
		minutes: '', //倒計(jì)時(shí)分鐘
		seconds: '', //倒計(jì)時(shí)秒
		isEnd: false, //支付超時(shí)
	}
}
methods: {
        // 倒計(jì)時(shí)
        countDown(){    
        	// 當(dāng)前時(shí)間
            let nowTime = new Date()
            // 獲取創(chuàng)建訂單15分鐘后的時(shí)間,this.payForm.create_time:訂單創(chuàng)建時(shí)間
            let endTime = new Date(this.payForm.create_time);
            endTime.setMinutes(endTime.getMinutes() + 15) // 結(jié)束時(shí)間,獲取創(chuàng)建訂單15分鐘后的時(shí)間
            // 兩個(gè)日期相差的時(shí)間戳,以毫秒為單位(1000ms = 1s)
            let totalTime = endTime - nowTime
            // 結(jié)束時(shí)間大于現(xiàn)在的時(shí)間
            if(totalTime>0){
                let timer = setInterval(() => {
                    if (totalTime >= 0) {
                        //獲取分鐘數(shù)
                        let minutes = 
                            Math.floor((((totalTime % (3600 * 24 * 1000)) / 1000) % 3600) / 60);
                        //獲取秒數(shù)
                        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); // 停止調(diào)用函數(shù) 
                        this.isEnd = true
                    }
                }, 1000); 
            }else{
                this.isEnd = true
            }  
}

拓展

上面案例只需要進(jìn)行分鐘及秒的計(jì)算,倒計(jì)時(shí)時(shí)間長(zhǎng)點(diǎn)的話可能會(huì)涉及到天數(shù)及小時(shí)數(shù)的計(jì)算,思路與上面案例相同,了解天數(shù)及小時(shí)數(shù)的時(shí)間戳轉(zhuǎn)換公式即可,碼代如下。

//totalTime: 時(shí)間間隔,單位ms
let totalTime = endTime - createTime
//獲取天數(shù)
let day = Math.floor(totalTime / 1000 / 3600 / 24);
//獲取小時(shí)數(shù)
let h = Math.floor((totalTime % (3600 * 24 * 1000)) / 1000 / 3600);

到此這篇關(guān)于Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能的文章就介紹到這了,更多相關(guān)Vue訂單支付倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論