我們平常瀏覽網頁的時候，經常見到“距游戲公測1天2小時3分鐘4秒”這樣的倒計時器。時間如沙漏般一點點的減少，不僅能挑起用戶的興趣，而且讓頁面提升了一點逼格，還填補掉一些尷尬的空白位置。最近寫得越來越多，有用沒用都讓加個倒計時，干脆記錄下來，免得重復造輪子。

實現的方法并不復雜，關鍵是理解如何計算，尤其對我這種數學不好的人而言。下面兩個 demo 將分別用純 JavaScript 、基于 Vue.js 的 JavaScript 實現。注，代碼中可能包含部分 ES6 語法，但相信很容易理解。

JavaScript

創建一個 countdown 方法，用于計算并在控制臺打印距目標時間的日、時、分、秒數，每隔一秒遞歸執行一次。

msec 是當前時間距目標時間的毫秒數，由時間戳相減得到，我們將以這個數為基礎計算。我們都知道1天等于24小時，1小時等于60分鐘，1分鐘等于60秒，1秒等于1000毫秒。所以，msec / 1000 / 60 / 60 / 24 保留整數就是天數。如果換用 % 取余數，再保留整數后得到的就是小時數。以此類推就能算出其他所有數。

function countdown () {

// 目標日期時間戳

const end = Date.parse(new Date('2017-12-01'))

// 當前時間戳

const now = Date.parse(new Date())

// 相差的毫秒數

const msec = end - now

// 計算時分秒數

let day = parseInt(msec / 1000 / 60 / 60 / 24)

let hr = parseInt(msec / 1000 / 60 / 60 % 24)

let min = parseInt(msec / 1000 / 60 % 60)

let sec = parseInt(msec / 1000 % 60)

// 個位數前補零

hr = hr > 9 ? hr : '0' + hr

min = min > 9 ? min : '0' + min

sec = sec > 9 ? sec : '0' + sec

// 控制臺打印

console.log(`${day}天 ${hr}小時 ${min}分鐘 ${sec}秒`)

// 一秒后遞歸

setTimeout(function () {

countdown()

}, 1000)

}

控制臺打印結果：

27天 07小時 49分鐘 10秒

27天 07小時 49分鐘 09秒

27天 07小時 49分鐘 08秒

...

Vue.js

如果單純使用 JavaScript ，我們需要在每次計算后手動更新 DOM 元素(將數據顯示給用戶)，既不方便又難以維護。實際項目中更多的是配合前端框架，將計算結果實時渲染到頁面上。

頁面結構中的數據來自 Vue 實例的 data 對象。

{{ `${day}天 ${hr}小時 ${min}分鐘 ${sec}分鐘` }}

mounted 是 Vue 的生命周期方法，可以理解為在頁面加載完畢后執行 countdown 方法。countdown 方法每隔一秒會執行一次，并將計算結果分別賦予變量 day、hr、min、sec，同時改變的還有頁面上顯示的內容。

new Vue({

el: '#app',

data: function () {

return {

day: 0, hr: 0, min: 0, sec: 0

}

},

mounted: function () {

this.countdown()

},

methods: {

countdown: function () {

const end = Date.parse(new Date('2017-12-01'))

const now = Date.parse(new Date())

const msec = end - now

let day = parseInt(msec / 1000 / 60 / 60 / 24)

let hr = parseInt(msec / 1000 / 60 / 60 % 24)

let min = parseInt(msec / 1000 / 60 % 60)

let sec = parseInt(msec / 1000 % 60)

this.day = day

this.hr = hr > 9 ? hr : '0' + hr

this.min = min > 9 ? min : '0' + min

this.sec = sec > 9 ? sec : '0' + sec

const that = this

setTimeout(function () {

that.countdown()

}, 1000)

}

}

})

相關環境：Windows 7 x64 / Vue.js 2.4.4

標簽： vue

頂一下

(0)

0%

踩一下

(0)

0%

總結

以上是生活随笔為你收集整理的js vue中得延时器_Vue.js实现时分秒倒计时的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。