vue中使用moment設(shè)置倒計(jì)時(shí)的方法
vue中使用moment 設(shè)置倒計(jì)時(shí)的方法
方法一
日常開(kāi)發(fā)中時(shí)常需要使用倒計(jì)時(shí)的方法 現(xiàn)在進(jìn)行封裝一下
//第一步 引入moment
import moment from 'moment';
let nowTime:any = ref('')//當(dāng)前時(shí)間
let diffTime:any = ref('')//當(dāng)前時(shí)間和指定時(shí)間的差值
let countdown:any = ref(0)//倒計(jì)時(shí)
// 設(shè)置setInterval 用于每秒鐘輸出一次當(dāng)前時(shí)間 更新倒計(jì)時(shí)的時(shí)間
let interval:any = setInterval(function() {
//按照時(shí)分秒格式 獲取當(dāng)前時(shí)間 需要年月日這樣設(shè)置 "YYYY-MMM-DDD HH:mm:ss"
nowTime.value = moment().format("HH:mm:ss")
//通過(guò)比較時(shí)間差 獲取一個(gè)秒數(shù)值
//比較時(shí)間差 按照秒seconds進(jìn)行比較 如果是年月日比較如右設(shè)置 moment('2024-02-05 10:00:00', 'YYYY-MMM-DDD hh:mm:ss')
//moment() 為當(dāng)前時(shí)間
diffTime.value = moment('10:00:00', 'hh:mm:ss').diff(moment(), "seconds")
//倒計(jì)時(shí) 如果只需要最后5分鐘才顯示倒計(jì)時(shí) 這進(jìn)行判斷
if(diffTime.value<5*60){
let h = moment.duration(diffTime.value, 'seconds').hours()//小時(shí)
let m = moment.duration(diffTime.value, 'seconds').minutes()//分鐘
let s = moment.duration(diffTime.value, 'seconds').seconds()//秒
countdown.value = `${h<10?'0'+h:h}:${m<10?'0'+m:m}:${s<10?'0'+s:s}`
}
// 判斷是否需要執(zhí)行定時(shí)器
if(diffTime.value < 0 ){
clearInterval(interval)//清除定時(shí)器
}
}, 1000);
//頁(yè)面銷(xiāo)毀時(shí)觸發(fā)
onBeforeUnmount(()=>{
clearInterval(interval)//清除定時(shí)器
})
方法二
思路: 結(jié)束時(shí)間 - 當(dāng)前時(shí)間 = 剩余的秒數(shù);
countDown(end_time) {
if (end_time == null) return;
let nowTime = moment() .locale('zh-cn') .format('YYYY-MM-DD HH:mm:ss'); //當(dāng)前時(shí)間
let endTime = moment(end_time) .locale('zh-cn') .format('YYYY-MM-DD HH:mm:ss');
return moment(endTime).diff(moment(nowTime), 'seconds'); //剩余可倒計(jì)時(shí)的秒數(shù)
},到此這篇關(guān)于vue中使用moment設(shè)置倒計(jì)時(shí)的方法的文章就介紹到這了,更多相關(guān)vue moment設(shè)置倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue在A(yíng)pp.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作
這篇文章主要介紹了vue在A(yíng)pp.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue.js實(shí)現(xiàn)簡(jiǎn)單ToDoList 前期準(zhǔn)備(一)
這篇文章主要介紹了Vue.js實(shí)現(xiàn)簡(jiǎn)單ToDoList的前期準(zhǔn)備,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
elementPlus組件之表格編輯并校驗(yàn)功能實(shí)現(xiàn)
本文詳細(xì)介紹了如何使用Element Plus組件實(shí)現(xiàn)表格的單條數(shù)據(jù)新增、編輯、刪除操作,并對(duì)數(shù)據(jù)進(jìn)行校驗(yàn),代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧2024-12-12
VUE前端導(dǎo)出文件之file-saver插件安裝使用教程
這篇文章主要給大家介紹了關(guān)于VUE前端導(dǎo)出文件之file-saver插件安裝使用的相關(guān)資料,file-saver是一個(gè)用于保存文件的JavaScript庫(kù),它提供了一種簡(jiǎn)單的方式來(lái)生成和保存文件,支持各種文件類(lèi)型,例如文本文件、圖片、PDF等,需要的朋友可以參考下2024-05-05
解決Vue警告Write?operation?failed:computed?value?is?readonl
這篇文章主要給大家介紹了關(guān)于如何解決Vue警告Write?operation?failed:computed?value?is?readonly的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問(wèn)題。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02
解決vue報(bào)錯(cuò)Syntax Error:TypeError:this.getOptions is&n
在未安裝less 和 less-loader 的情況下,編寫(xiě)了 less 模塊代碼,通過(guò) npm 同時(shí)安裝了兩者,遇到錯(cuò)誤后,將問(wèn)題歸因于 less-loader 版本過(guò)高,解決了問(wèn)題,分享經(jīng)驗(yàn),希望可以幫助到遇到同樣問(wèn)題的開(kāi)發(fā)者2026-04-04
Vue中JS動(dòng)畫(huà)與Velocity.js的結(jié)合使用
這篇文章主要介紹了Vue中JS動(dòng)畫(huà)與Velocity.js的結(jié)合使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02

