vue实现倒计时

vue实现倒计时

	最近项目中需要用到通过获取系统当前时间和自定义时间(两者之差)实现倒计时的功能，话不多说，直接上代码。。。

1. 新建一个文件countdown.vue

   <template>
       <p style="font-size: 18px">{{time}}</p>
   </template>
   <script>
       export default{
           data () {
               return {
                   time : '',
                   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.time = '倒计时已完成';
                   }else{
                       this.time = `${d} 天 ${h} 小时 ${m} 分 ${s} 秒`;    // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
                   }
               },
               formate(time) {
                   if (time >= 10) {
                       return time;
                   } else {
                       return `0${time}`;
                   }
               }
           }
       }
   </script>
   <style scoped>
   </style>
   

2. 再次新建一个测试test.vue进行调用上面我们封装的组件 countdown.vue

   <template>
       <div>
           <countdown :endTime='endTime'></countdown>
       </div>
   </template>
   <script>
       import countdown from '../components/countdown'   //  引入倒计时 countdown.vue地址
       export default{
           data() {
               return {
                   endTime : '2020-12-1 11:59:00'    // 设置定时器倒计时，时间必须大于当前时间和上面一样，跟上面对应
               }
           },
           components:{
               'countdown': countdown
           }
       }
   </script>
   <style scoped>
   </style>