使用vue怎么实现一个倒计时功能

这期内容当中小编将会给大家带来有关使用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();   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;  //时   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" //结束时间(苹果手机无法解析"-" 可以将格式改为2021/3/30)  },    components: {  Times,  }, };

上述就是小编为大家分享的使用vue怎么实现一个倒计时功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。