vue3+ts实现倒计时组件

<template>
  <div>
    <div v-if="!finished">
      {{ days }} days, {{ hours }} hours, {{ minutes }} minutes, {{ seconds }} seconds
    </div>
    <div v-else>
      Countdown finished!
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

const targetDate = new Date('December 25, 2022 00:00:00').getTime();

const currentTime = ref(new Date().getTime());
const timeRemaining = ref(targetDate - currentTime.value);

onMounted(() => {
  const interval = setInterval(() => {
    currentTime.value = new Date().getTime();
    timeRemaining.value = targetDate - currentTime.value;
  }, 1000);

  return () => clearInterval(interval);
});

const finished = computed(() => timeRemaining.value <= 0);
const days = computed(() => Math.floor(timeRemaining.value / (1000 * 60 * 60 * 24)));
const hours = computed(() => Math.floor((timeRemaining.value % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
const minutes = computed(() => Math.floor((timeRemaining.value % (1000 * 60 * 60)) / (1000 * 60)));
const seconds = computed(() => Math.floor((timeRemaining.value % (1000 * 60)) / 1000));
</script>

该组件将显示一个倒计时，直到给定目标日期（在此示例中是2022年12月25日）。组件将显示剩余的天数，小时数，分钟数和秒数。倒计时会每秒更新一次，直到倒计时结束。