天时分秒倒计时vue3

最新推荐文章于 2024-04-29 17:01:02 发布

XH_LZ

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量588

点赞数

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/m0_46279754/article/details/125311878

版权

 // 定义天数  小时  分钟  秒数
    const day = ref(198)
    const hour = ref(1)
    const min = ref(1)
    const sec = ref(5)

    const times = ref([
      {
        num: day.value,
        text: 'Day'
      },
      {
        num: hour.value,
        text: 'hour'
      },
      {
        num: min.value,
        text: 'min'
      },
      {
        num: sec.value,
        text: 'sec'
      }
    ])

    //递归每秒调用countTime方法，显示动态时间效果

    setInterval(() => {
      //获取当前时间
      const date = new Date();
      const now = ref(date.getTime());

      //设置截止时间
      const endDate = ref(new Date('2022-7-22 23:23:23'));
      const end = ref(endDate.value.getTime());

      //时间差
      const leftTime = ref(end.value - now.value);
      //定义变量 d,h,m,s保存倒计时的时间

      if (leftTime.value >= 0) {
        times.value[0].num = Math.floor(leftTime.value / 1000 / 60 / 60 / 24);
        times.value[1].num = Math.floor(leftTime.value / 1000 / 60 / 60 % 24);
        times.value[2].num = Math.floor(leftTime.value / 1000 / 60 % 60);
        times.value[3].num = Math.floor(leftTime.value / 1000 % 60);
      }
    }, 1000);