vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果

更新時(shí)間：2019年08月26日 11:44:49 作者：Aesopcmc

這篇文章主要為大家詳細(xì)介紹了vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+moment實(shí)現(xiàn)倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下

示例

代碼

<!-- 使用計(jì)算屬性，傳入截止日期 -->
<span>{{countDown(endDate)}}</span>

/*引入日期插件*/
import moment from 'moment'
export default {
 data() {
 return {
 now: moment(),
 endDate: '2019-05-07 08:20:00',
 }
 },
 mounted() {
 //定時(shí)更新當(dāng)前時(shí)間
 setInterval(()=>{
 this.now = moment()
 },1000),
 //數(shù)字前補(bǔ) 0 
 // num傳入的數(shù)字，n需要的字符長度
 PrefixInteger(num, n) {
 return (Array(n).join(0) + num).slice(-n);
 }
 },
 computed: {
 //計(jì)算屬性，返回剩余時(shí)間
 countDown(){
 return function(endDate) {
 let m1 = this.now
 let m2 = moment(endDate)
 var du = moment.duration(m2 - m1, 'ms'),
 hours = du.get('hours'),
 mins = du.get('minutes'),
 ss = du.get('seconds');
 if(hours<=0 && mins<=0 && ss<=0) {
  return "已超時(shí)"
 }else {
  return this.PrefixInteger(hours,2) + ':' + this.PrefixInteger(mins,2) + ':' + this.PrefixInteger(ss,2)
 }
 }
 }
 },
}

更多關(guān)于倒計(jì)時(shí)的文章請查看專題：《倒計(jì)時(shí)功能》

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案
這篇文章主要介紹了vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue中兩種路由模式的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了vue中兩種路由模式的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下
2023-08-08
Vue中實(shí)現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解
這篇文章主要為大家介紹了Vue中實(shí)現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
詳解vue微信網(wǎng)頁授權(quán)最終解決方案
這篇文章主要介紹了詳解vue微信網(wǎng)頁授權(quán)最終解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-06-06
VUE側(cè)邊導(dǎo)航欄實(shí)現(xiàn)篩選過濾的示例代碼
本文主要介紹了VUE側(cè)邊導(dǎo)航欄實(shí)現(xiàn)篩選過濾的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue中proxy代理的用法(解決跨域問題)
這篇文章主要介紹了vue中的proxy代理的用法(解決跨域問題)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue v2.4中新增的$attrs及$listeners屬性使用教程
這篇文章主要給大家介紹了關(guān)于Vue v2.4中新增的$attrs及$listeners屬性的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
vue3配置permission.js和router、pinia實(shí)現(xiàn)路由攔截的簡單步驟
這篇文章主要介紹了如何在場景網(wǎng)站中實(shí)現(xiàn)對未登錄用戶訪問的攔截,通過配置Pinia,創(chuàng)建一個(gè)user.js文件來存儲用戶數(shù)據(jù),并在main.js中進(jìn)行配置,同時(shí)通過在router目錄下創(chuàng)建permission.js文件,可以實(shí)現(xiàn)對未登錄用戶的攔截,需要的朋友可以參考下
2024-11-11
Vue.js 中制作自定義選擇組件的代碼附演示demo
這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-02-02
vue項(xiàng)目配置 webpack-obfuscator 進(jìn)行代碼加密混淆的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目配置 webpack-obfuscator 進(jìn)行代碼加密混淆,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-02