vue3+ts封装时间倒计时（纯代码）

• <template>
  • <div>
    <!-- <p>距离结束还剩：</p> -->
    <p>剩余时间：{{ data.hours }} : {{ data.minutes }} : {{ data.seconds }}</p>
    </div>
    </template>
    
    <script lang="ts" setup>
    import { reactive, onMounted, watchEffect } from 'vue';
    const data = reactive({
    totalSeconds: 24 * 60 * 60,
    hours: 0,
    minutes: 0,
    seconds: 0
    })
    // 获取时分秒
    const updateCountdown = () => {
    data.hours = Math.floor(data.totalSeconds / 3600)
    data.minutes = Math.floor((data.totalSeconds - data.hours * 3600) / 60)
    data.seconds = data.totalSeconds % 60
    }
    // 倒计时方法
    const countdown = () => {
    data.totalSeconds--
    updateCountdown()
    }
    
    onMounted(() => {
    // 开启定时器，一秒调用一下倒计时方法
    let timer = setInterval(countdown, 1000)
    // 监听，当总时间为0的时候关闭定时器
    watchEffect(() => {
    if (data.totalSeconds === 0) {
    clearInterval(timer)
    }
    })
    })
    </script>