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 &#

相关推荐

  1. 用python海龟画图实现计时功能

    2024-07-17 21:46:02       30 阅读
  2. jquery 实现计时

    2024-07-17 21:46:02       36 阅读
  3. 自定义多阶段计时实现分段计时

    2024-07-17 21:46:02       37 阅读
  4. 如何在unity中实现计时

    2024-07-17 21:46:02       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-17 21:46:02       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-17 21:46:02       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-17 21:46:02       57 阅读
  4. Python语言-面向对象

    2024-07-17 21:46:02       68 阅读

热门阅读

  1. UDP协议

    UDP协议

    2024-07-17 21:46:02      22 阅读
  2. D365 Fraud Protection Account Protection部署方案

    2024-07-17 21:46:02       25 阅读
  3. 解决数据卷root权限问题的Docker科研向实践思路

    2024-07-17 21:46:02       24 阅读
  4. Webservice使用RestSharp封送SOAP

    2024-07-17 21:46:02       23 阅读
  5. 关于HDFS 和HBase

    2024-07-17 21:46:02       18 阅读
  6. python基础语法

    2024-07-17 21:46:02       22 阅读
  7. C#线程池介绍及应用

    2024-07-17 21:46:02       20 阅读
  8. Collections.unmodifiableList

    2024-07-17 21:46:02       18 阅读
  9. 自动驾驶,革了谁的命

    2024-07-17 21:46:02       24 阅读