Typescript 实现倒计时功能 useCountdown

效果图

代码块

useCountdown.ts

import {onUnmounted, reactive, ref, watch} from "vue";

type union = 'days' | 'hours' | 'minutes' | 'seconds' | 'milliseconds'

export type Remains = Record<union, number>;

/**
 * 创建一个倒计时
 *
 * 用法
 */
export const useCountDown = () => {
    const remainMilliseconds = ref();
    const started = ref(false);
    const finished = ref<boolean>();
    const remains = reactive<Remains>({
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
        milliseconds: 0,
    });

    const start = (deadline: number) => {
        if (started.value) {
            return
        }
        started.value = true
        loop(deadline)
    }

    const loop = (deadline: number) => {
        if (typeof requestAnimationFrame == 'function') {
            if (started.value) {
                requestAnimationFrame(() => {
                    const nowTime = new Date().getTime();
                    remainMilliseconds.value = deadline - nowTime;
                    finished.value = remainMilliseconds.value <= 0
                    if (finished.value) {
                        stop()
                    }
                    loop(deadline)
                })
            }
        } else {
            // 降级使用定时器
            const interval = setInterval(() => {
                const nowTime = new Date().getTime();
                remainMilliseconds.value = deadline - nowTime;
                finished.value = remainMilliseconds.value <= 0
                if (finished.value) {
                    stop()
                    clearInterval(interval)
                }
            }, 16);
        }
    }

    const stop = () => {
        started.value = false
    }

    watch(remainMilliseconds, (value) => {
        remains.days = Math.max((value / 1000 / 60 / 60 / 24 | 0), 0)
        remains.hours = Math.max((value / 1000 / 60 / 60 % 24 | 0), 0)
        remains.minutes = Math.max((value / 1000 / 60 % 60 | 0), 0)
        remains.seconds = Math.max((value / 1000 % 60 | 0), 0)
        remains.milliseconds = Math.max((value % 1000 | 0), 0)
    })

    onUnmounted(stop)

    return {finished, remains, start, stop}
}

vue

<template>
	{{remains.days}}天
	{{remains.hours}}时
	{{remains.minutes}}分钟
	{{remains.seconds}}秒
</template>

<script setup lang="ts">
	import { watch } from 'vue';
import { useCountDown } from './useCountDown';
	const { remains,finished, start } = useCountDown()
	start(new Date().getTime() + 10 * 10000000)
	watch(finished,(n:boolean)=>{
		if(n){
			alert('done')
		}
	})
</script>

<style lang="scss">
</style>