使用vue怎么實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)使用vue怎么實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

1.子組件部分

<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í)間(蘋果手機(jī)無法解析"-" 可以將格式改為2021/3/30)
 },
 
 components: {
 Times,
 },
};

上述就是小編為大家分享的使用vue怎么實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。