vue自定义倒计时组件封装

最新推荐文章于 2024-07-24 23:00:08 发布

王明鹏

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量543

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/cfnwmp/article/details/123998627

版权

<template>
  <div class="box">
    {{rest}}
  </div>
</template>
<script>
  export default {
    watch:{
      startDateStr:{
        handler(){
          this.rest = this.formatTotalDateSub(this.calcTotalSecond(this.startDateStr,this.endDateStr))    
        }
      }

    },
    data() {
      return {
        startDateStr: new Date().getTime(),
        endDateStr: new Date('2022-4-7 13:00:00').getTime(),
        rest:''
      }
    },
    created() {
      setInterval(()=>{
        this.startDateStr=new Date().getTime()
      },100)
    },
    methods: {
      calcTotalSecond(startDateStr, endDateStr) {
        let date1 = new Date(startDateStr); // 开始时间
        let date2 = new Date(endDateStr); // 结束时间
        let timeSub = date2.getTime() - date1.getTime(); // 时间差毫秒
        return timeSub / 1000;
      },

      formatTotalDateSub(secondSub) {
        let days = Math.floor(secondSub / (24 * 3600)); // 计算出小时数
        let leave1 = secondSub % (24 * 3600); // 计算天数后剩余的毫秒数
        let hours = Math.floor(leave1 / 3600); // 计算相差分钟数
        let leave2 = leave1 % (3600); // 计算小时数后剩余的毫秒数
        let minutes = Math.floor(leave2 / 60); // 计算相差秒数
        let leave3 = leave2 % 60; // 计算分钟数后剩余的毫秒数
        let seconds = Math.round(leave3);
        return days + " 天 " + hours + " 时 " + minutes + " 分 " + seconds + ' 秒';
      }
    }
  }
</script>