【js---vue】基于事件模式实现一个倒计时，可以监听倒计时的开始和停止，执行对应函数

一、效果：

二、js文件（countdown.js代码）：

export const CountdownEventName={//监听事件名称
    START :'start',
    RUNNING :'running',
    STOP :'stop',
}
const CountdownStatus={//倒计时状态
    RUNNING :'running',
    STOPED :'stoped'
}
export function fillZero(num) {//保证取两位数字，只有一位的话补上0
    return `0${num}`.slice(-2);
}
export class Countdown{
    events={
        // start:[fn,fn]//存放执行函数的数组
    }

    //这三个单位都是毫秒(ms)
    endTime=0//倒计时结束时间
    step=0//显示的时间的变化间隔，即this.countdown()的执行间隔
    remainTime=0//剩余时间

    status=CountdownStatus.STOPED//初始状态为stoped，因为还没开始

    static COUNT_IN_MILLISECOND = 1
    static SECOND_IN_MILLISECOND= 1000 * Countdown.COUNT_IN_MILLISECOND//一秒等于1000毫秒
    static MINUTE_IN_MILLISECOND=60 * Countdown.SECOND_IN_MILLISECOND//一分钟等于60秒
    static HOUR_IN_MILLISECOND=60 * Countdown.MINUTE_IN_MILLISECOND
    static DAY_IN_MILLISECOND=24 * Countdown.HOUR_IN_MILLISECOND

    constructor(endTime,step){
       this.endTime=endTime
       this.step=step
    }
    on(eventName,eventFn){//把执行函数存入数组
        if(this.events[eventName]){
            this.events[eventName].push(eventFn)
        }else{
            this.events[eventName]=[eventFn]
        }
    }
    emit(eventName,eventMsg){//触发监听事件后，执行对应函数
        if(this.events[eventName]){
            this.events[eventName].forEach(fn => {
                fn(eventMsg)
            });
        }
    }
    start(){
        this.emit(CountdownEventName.START)
        this.status=CountdownStatus.RUNNING
        this.countdown()
    }
    stop(){
        this.emit(CountdownEventName.STOP)
        this.status=CountdownStatus.STOPED
    }
    countdown(){
        if(this.status===CountdownStatus.RUNNING){

           this.remainTime=Math.max(this.endTime-Date.now(),0)//取剩余时间，避免取负数

           this.emit(CountdownEventName.RUNNING,this.parseRemainTime(this.remainTime))

           if(this.remainTime>0){
             setTimeout(() => {
                 this.countdown()
             }, this.step)
           }else{
               this.stop()
           }
        }
    }
    parseRemainTime(remainTime){//把时间戳转化为时间格式
      let time=remainTime

      const days=Math.floor(time/Countdown.DAY_IN_MILLISECOND)
      time=time%Countdown.DAY_IN_MILLISECOND

      const hours = Math.floor(time / Countdown.HOUR_IN_MILLISECOND)
      time = time % Countdown.HOUR_IN_MILLISECOND;

      const minutes = Math.floor(time / Countdown.MINUTE_IN_MILLISECOND)
      time = time % Countdown.MINUTE_IN_MILLISECOND;

      const seconds = Math.floor(time / Countdown.SECOND_IN_MILLISECOND)
      time = time % Countdown.SECOND_IN_MILLISECOND;

      const count = Math.floor(time / Countdown.COUNT_IN_MILLISECOND)

      return {
            days,
            hours,
            minutes,
            seconds,
            count
        }
    }
}

三、vue文件（显示倒计时）：

<template>
  <div>
    <div style="margin: 200px;font-size: 20px;">剩余：{{ timeDisplay }}</div>
  </div>
</template>

<script>
    import {
        Countdown,
        CountdownEventName,
        fillZero,
    } from "../../../libs/countdown.js";
    export default {
        data() {
            return {
                timeDisplay: "0天 00:00:00.00",
            };
        },
        mounted() {
            // 第一个参数是停止时间，第二个参数是timeDisplay的变化间隔。两个参数的单位都是毫秒
            const countdown = new Countdown(Date.now() + 10 * 24 * 60 * 60 * 1000, 100);

            countdown.on(CountdownEventName.START, () => {
                //监听倒计时开始
                console.log("倒计时开始啦！");
            });

            countdown.on(CountdownEventName.STOP, () => {
                //监听倒计时停止
                console.log("倒计时停止啦！");
            });

            countdown.on(CountdownEventName.RUNNING, (remainTimeData) => {
                //监听倒计时运行，获取时间显示
                const { days, hours, minutes, seconds, count } = remainTimeData;
                let frontStr = [hours, minutes, seconds].map(fillZero).join(":");
                this.timeDisplay = days + "天" + " " + frontStr + "." + fillZero(count);
            });

            countdown.start(); //开启倒计时

            // countdown.stop()//停止倒计时
        },
        methods: {},
    };
</script>