vue中使用moment設置倒計時的方法
更新時間:2024年02月06日 10:37:39 作者:一室易安
這篇文章給大家介紹了vue中使用moment設置倒計時的方法,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
vue中使用moment 設置倒計時的方法
方法一
日常開發(fā)中時常需要使用倒計時的方法 現(xiàn)在進行封裝一下
//第一步 引入moment
import moment from 'moment';
let nowTime:any = ref('')//當前時間
let diffTime:any = ref('')//當前時間和指定時間的差值
let countdown:any = ref(0)//倒計時
// 設置setInterval 用于每秒鐘輸出一次當前時間 更新倒計時的時間
let interval:any = setInterval(function() {
//按照時分秒格式 獲取當前時間 需要年月日這樣設置 "YYYY-MMM-DDD HH:mm:ss"
nowTime.value = moment().format("HH:mm:ss")
//通過比較時間差 獲取一個秒數(shù)值
//比較時間差 按照秒seconds進行比較 如果是年月日比較如右設置 moment('2024-02-05 10:00:00', 'YYYY-MMM-DDD hh:mm:ss')
//moment() 為當前時間
diffTime.value = moment('10:00:00', 'hh:mm:ss').diff(moment(), "seconds")
//倒計時 如果只需要最后5分鐘才顯示倒計時 這進行判斷
if(diffTime.value<5*60){
let h = moment.duration(diffTime.value, 'seconds').hours()//小時
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í)行定時器
if(diffTime.value < 0 ){
clearInterval(interval)//清除定時器
}
}, 1000);
//頁面銷毀時觸發(fā)
onBeforeUnmount(()=>{
clearInterval(interval)//清除定時器
})
方法二
思路: 結(jié)束時間 - 當前時間 = 剩余的秒數(shù);
countDown(end_time) {
if (end_time == null) return;
let nowTime = moment() .locale('zh-cn') .format('YYYY-MM-DD HH:mm:ss'); //當前時間
let endTime = moment(end_time) .locale('zh-cn') .format('YYYY-MM-DD HH:mm:ss');
return moment(endTime).diff(moment(nowTime), 'seconds'); //剩余可倒計時的秒數(shù)
},到此這篇關于vue中使用moment設置倒計時的方法的文章就介紹到這了,更多相關vue moment設置倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Ant Design Vue 添加區(qū)分中英文的長度校驗功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長度校驗功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下功能,2020-01-01
Vue3使用富文本框(wangeditor)的方法總結(jié)
項目中用到了富文本,選來選去選擇了wangeditor,下面這篇文章主要給大家介紹了關于Vue3使用富文本框(wangeditor)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-10-10

