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

通過(guò)父組件傳入的結(jié)束時(shí)間減去當(dāng)前日期得到剩余時(shí)間

<div class='itemend'> <p class='itemss'>倒計(jì)時(shí)<span>{{day}}</span>天<span>{{hour}}</span>時(shí)<span>{{minute}}</span>分<span>{{second}}</span>秒</p></div>

代碼：

data() { return { day: '', //天 hour: '', //時(shí) minute: '', //分 second: '', //秒 flag: false, }; }, mounted() { let time = setInterval(() => { if (this.flag == true) { clearInterval(time); } this.timeDown(); }, 500); }, props: { endTime: { type: String, }, }, methods: { timeDown() { const endTime = new Date(this.endTime); const nowTime = new Date(); let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000); let d = parseInt(leftTime / (24 * 60 * 60)); let h = this.formate(parseInt((leftTime / (60 * 60)) % 24)); let m = this.formate(parseInt((leftTime / 60) % 60)); let s = this.formate(parseInt(leftTime % 60)); if (leftTime <= 0) { this.flag = true; this.$emit('time-end'); } this.day = d; //天 this.hour = h; //時(shí) this.minute = m; //分 this.second = s; //秒 }, formate(time) { if (time >= 10) { return time; } else { return `0${time}`; } },}2.父組件引用

<template> <div> <Times :endTime=’timeEnd’></Times> </div> </template>import Times from '@/components/time';export default { name: 'Home', data() { return { timeEnd: '2021-3-30 9:50' //結(jié)束時(shí)間(蘋(píng)果手機(jī)無(wú)法解析'-' 可以將格式改為2021/3/30) }, components: { Times, },};

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

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專(zhuān)題

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。