vue中使用moment設(shè)置倒計(jì)時的方法
vue中使用moment 設(shè)置倒計(jì)時的方法
方法一
日常開發(fā)中時常需要使用倒計(jì)時的方法 現(xiàn)在進(jìn)行封裝一下
//第一步 引入moment import moment from 'moment'; let nowTime:any = ref('')//當(dāng)前時間 let diffTime:any = ref('')//當(dāng)前時間和指定時間的差值 let countdown:any = ref(0)//倒計(jì)時 // 設(shè)置setInterval 用于每秒鐘輸出一次當(dāng)前時間 更新倒計(jì)時的時間 let interval:any = setInterval(function() { //按照時分秒格式 獲取當(dāng)前時間 需要年月日這樣設(shè)置 "YYYY-MMM-DDD HH:mm:ss" nowTime.value = moment().format("HH:mm:ss") //通過比較時間差 獲取一個秒數(shù)值 //比較時間差 按照秒seconds進(jìn)行比較 如果是年月日比較如右設(shè)置 moment('2024-02-05 10:00:00', 'YYYY-MMM-DDD hh:mm:ss') //moment() 為當(dāng)前時間 diffTime.value = moment('10:00:00', 'hh:mm:ss').diff(moment(), "seconds") //倒計(jì)時 如果只需要最后5分鐘才顯示倒計(jì)時 這進(jìn)行判斷 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é)束時間 - 當(dāng)前時間 = 剩余的秒數(shù);
countDown(end_time) { if (end_time == null) return; let nowTime = moment() .locale('zh-cn') .format('YYYY-MM-DD HH:mm:ss'); //當(dāng)前時間 let endTime = moment(end_time) .locale('zh-cn') .format('YYYY-MM-DD HH:mm:ss'); return moment(endTime).diff(moment(nowTime), 'seconds'); //剩余可倒計(jì)時的秒數(shù) },
到此這篇關(guān)于vue中使用moment設(shè)置倒計(jì)時的方法的文章就介紹到這了,更多相關(guān)vue moment設(shè)置倒計(jì)時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Ant Design Vue 添加區(qū)分中英文的長度校驗(yàn)功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長度校驗(yàn)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下功能,2020-01-01Vue3使用富文本框(wangeditor)的方法總結(jié)
項(xiàng)目中用到了富文本,選來選去選擇了wangeditor,下面這篇文章主要給大家介紹了關(guān)于Vue3使用富文本框(wangeditor)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號與不加括號的區(qū)別,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-10-10關(guān)于vue.js v-bind 的一些理解和思考
本篇文章主要介紹了關(guān)于vue.js v-bind 的一些理解和思考,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06Vue組件實(shí)例間的直接訪問實(shí)現(xiàn)代碼
在組件實(shí)例中,Vue提供了相應(yīng)的屬性,包括$parent、$children、$refs和$root,這些屬性都掛載在組件的this上。本文將詳細(xì)介紹Vue組件實(shí)例間的直接訪問,需要的朋友可以參考下2017-08-08詳解Vue中如何實(shí)現(xiàn)圖片處理與濾鏡效果
Vue.js作為一個靈活的JavaScript框架,可以很容易地與圖像處理庫和濾鏡效果庫集成,以實(shí)現(xiàn)各種圖像處理需求,下面我們就來學(xué)習(xí)一下vue是如何實(shí)現(xiàn)圖片處理與濾鏡效果的吧2023-10-10