本文例項為大家分享了vue實現倒計時功能的具體程式碼，供大家參考，具體內容如下

通過父元件傳入的結束時間減去當前日期得到剩餘時間

1.子元件部分

<div class="itemend">
 <p class="itemss">倒計時<span>{{day}}</span>天<span>{{hour}}</span>時<span>{{minute}}</span>分<span>{{second}}</span>秒</p>
</div>

data() {
 return {
  day: "",//天
  hour: "",//時
  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();
 NZFDbZbw
 
 let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
  let d = parseInt(leftTime / (24 * 60 * 60));
  let h = this.formate(parseInt((leftTime /NZFDbZbw (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(NZFDbZbw
 
"time-end");
  }
  this.day = d;  //天
  this.hour = h;  //時
  this程式設計客棧.minute = m; //分
  this.second = s; //秒
 },formate(time) {
  if (time >= 10) {
  return time;
  } else {
  return `0${time}`;
  }
 },}

2.父元件引用

<tempwww.cppcns.comlate>
 <div>
 <Times :endTime='timeEnd'></Times>
 </div> 
</template>

import Times from "@/components/time";
export default {
 name: "Home",data() {
 return {
  timeEnd: "2021-3-30 9:50" //結束時間(蘋果手機無法解析"-" 可以將格式改為2021/3/30)
 },components: {
 Times,};

更多關於倒計時的文章請檢視專題：《倒計時功能》

更多javascript時鐘特效點選檢視：javaScript時鐘特效專題

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。