時分秒倒計時組件

template

{{ getHours1 }}

{{ getHours2 }}

:

{{ getMinutes1 }}

{{ getMinutes2 }}

:

{{ getSeconds1 }}

{{ getSeconds2 }}

{{clocker}}

script

export default {

name: 'downTime',

props: { // 接收父組件傳遞過來的參數(shù),這里傳了 結束時間 - 開始時間 - 結束后顯示的內(nèi)容

endTime: {

type: Number

},

startTime: {

type: Number

},

endMsg: {

type: String

}

},

data () {

return {

isShow: false, // 控制顯示結束或還未結束顯示的內(nèi)容

clocker: '', // 結束后顯示的內(nèi)容

timeObj: null, // 時間對象,下方會用到

myDay: 0, // 我定義來接收計算出來的 天 的

myHours: 0, // 我定義來接收計算出來的 小時 的

myMinutes: 0, // 我定義來接收計算出來的 分鐘 的

mySeconds: 0// 我定義來接收計算出來的 秒鐘 的

}

},

computed: {

getHours1 () {

return this.myHours < 10 ? 0 : parseInt((this.myHours % 100) / 10)

},

getHours2 () {

return parseInt(this.myHours % 10)

},

getMinutes1 () {

return this.myMinutes < 10 ? 0 : parseInt((this.myMinutes % 100) / 10)

},

getMinutes2 () {

return parseInt(this.myMinutes % 10)

},

getSeconds1 () {

return this.mySeconds < 10 ? 0 : parseInt((this.mySeconds % 100) / 10)

},

getSeconds2 () {

return parseInt(this.mySeconds % 10)

}

},

mounted () {

},

methods: {

option () {

// 計算時間差

let timeLag = (this.endTime - this.startTime) / 1000

// 判斷當前是否時分秒的值是否大于10

const add = num => {

return num < 10 ? '0' + num : num

}

// 時間倒計時運算的方法

const timeFunction = () => {

const time = timeLag--

this.timeObj = { // 時間對象

seconds: Math.floor(time % 60),

minutes: Math.floor(time / 60) % 60,

hours: Math.floor(time / 60 / 60) % 24,

days: Math.floor(time / 60 / 60 / 24)

}

// 計算出時分秒

this.myDay = `${add(this.timeObj.days)}`

this.myHours = `${add(this.timeObj.hours)}`

this.myMinutes = `${add(this.timeObj.minutes)}`

this.mySeconds = `${add(this.timeObj.seconds)}`

// 當時間差小于等于0時,停止倒計時

if (time <= 0) {

this.isShow = true

this.clocker = this.endMsg

clearInterval(go)

}

}

// 開始執(zhí)行倒計時

timeFunction()

// 每一秒執(zhí)行一次

const go = setInterval(() => {

timeFunction()

}, 1000)

}

},

watch: {

endTime: {

handler (newName, oldName) {

this.option()

},

immediate: true,

deep: true

}

}

}

備注：我將時分秒使用計算屬性分成了個位和十位兩部分展示，在watch中深度監(jiān)聽endTime屬性的變化并重新調(diào)用定時器

style

.downTime-wrapper{

display: inline-block;

.dian {

font-weight: bold;

position: relative;

top: -5px;

}

.hour{

display: inline-block;

font-size: 36px;

span {

border-radius:6px;

color: #FFFFFF;

background:rgba(27,23,22,1);

padding: 1px 10px;

margin: 0 2px;

}

}

.minute{

display: inline-block;

font-size: 36px;

span {

border-radius:6px;

color: #FFFFFF;

background:rgba(27,23,22,1);

padding: 1px 10px;

margin: 0 2px;

}

}

.second {

display: inline-block;

font-size: 36px;

margin-top: -5px;

span {

border-radius:6px;

color: #FFFFFF;

background:rgba(27,23,22,1);

padding: 1px 10px;

margin: 0 2px;

}

}

}

使用

在頁面中引入并注冊后即可使用

:endTime="item.endTime"

:startTime="new Date().getTime()"

:endMsg="item.endMsg">

毫秒倒計時效果

在template中加入

:00

聲明timeDt方法

methods: {

timeDt () {

this.timer1 = setTimeout(function () {

var haomiao = 99

document.getElementById('timehs').innerHTML = ':' + haomiao

this.timer2 = setInterval(function () {

const timehs = document.getElementById('timehs')

if (timehs) {

timehs.innerHTML = `:${haomiao < 10 ? `0${haomiao}` : haomiao}`

}

haomiao--

if (haomiao < 0) {

haomiao = 99

}

}, 10)

}, 1000)

}

}

在create生命周期函數(shù)中調(diào)用timeDt方法

created () {

this.$nextTick(() => {

this.timeDt()

})

},

總結

以上是生活随笔為你收集整理的vue 倒计时 插件_vue中实现倒计时组件与毫秒效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。