1.<div>{{timeDisplay}}</div>
2. js文件countdown.js代碼
export const CountdownEventName={//監(jiān)聽(tīng)事件名稱(chēng)
? ? START :'start',
? ? RUNNING :'running',
? ? STOP :'stop',
}
const CountdownStatus={//倒計(jì)時(shí)狀態(tài)
? ? RUNNING :'running',
? ? STOPED :'stoped'
}
export function fillZero(num) {//保證取兩位數(shù)字，只有一位的話(huà)補(bǔ)上0
? ? return `0${num}`.slice(-2);
}
export class Countdown{
? ? events={
? ? ? ? // start:[fn,fn]//存放執(zhí)行函數(shù)的數(shù)組
? ? }
? ? //這三個(gè)單位都是毫秒(ms)
? ? endTime=0//倒計(jì)時(shí)結(jié)束時(shí)間
? ? step=0//顯示的時(shí)間的變化間隔，即this.countdown()的執(zhí)行間隔
? ? remainTime=0//剩余時(shí)間
? ? status=CountdownStatus.STOPED//初始狀態(tài)為stoped，因?yàn)檫€沒(méi)開(kāi)始
? ? 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){//把執(zhí)行函數(shù)存入數(shù)組
? ? ? ? if(this.events[eventName]){
? ? ? ? ? ? this.events[eventName].push(eventFn)
? ? ? ? }else{
? ? ? ? ? ? this.events[eventName]=[eventFn]
? ? ? ? }
? ? }
? ? emit(eventName,eventMsg){//觸發(fā)監(jiān)聽(tīng)事件后，執(zhí)行對(duì)應(yīng)函數(shù)
? ? ? ? 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)//取剩余時(shí)間，避免取負(fù)數(shù)
? ? ? ? ? this.emit(CountdownEventName.RUNNING,this.parseRemainTime(this.remainTime))
? ? ? ? ? if(this.remainTime>0){
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? this.countdown()
? ? ? ? ? ? }, this.step)
? ? ? ? ? }else{
? ? ? ? ? ? ? this.stop()
? ? ? ? ? }
? ? ? ? }
? ? }
? ? parseRemainTime(remainTime){//把時(shí)間戳轉(zhuǎn)化為時(shí)間格式
? ? ? 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
? ? ? ? }
? ? }
}
3.<template>
? <div>
? ? <div>剩余：{{ timeDisplay }}</div>
? </div>
</template>
<script>
? ? import {
? ? ? ? Countdown,
? ? ? ? CountdownEventName,
? ? ? ? fillZero,
? ? } from "countdown.js";
? ? export default {
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? timeDisplay: "0天 00:00:00.00",
? ? ? ? ? ? };
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ? // 第一個(gè)參數(shù)是停止時(shí)間，第二個(gè)參數(shù)是timeDisplay的變化間隔。兩個(gè)參數(shù)的單位都是毫秒
? ? ? ? ? ? const countdown = new Countdown(Date.now() + 10 * 24 * 60 * 60 * 1000, 100);
? ? ? ? ? ? countdown.on(CountdownEventName.START, () => {
? ? ? ? ? ? ? ? //監(jiān)聽(tīng)倒計(jì)時(shí)開(kāi)始
? ? ? ? ? ? ? ? console.log("倒計(jì)時(shí)開(kāi)始啦！");
? ? ? ? ? ? });
? ? ? ? ? ? countdown.on(CountdownEventName.STOP, () => {
? ? ? ? ? ? ? ? //監(jiān)聽(tīng)倒計(jì)時(shí)停止
? ? ? ? ? ? ? ? console.log("倒計(jì)時(shí)停止啦！");
? ? ? ? ? ? });
? ? ? ? ? ? countdown.on(CountdownEventName.RUNNING, (remainTimeData) => {
? ? ? ? ? ? ? ? //監(jiān)聽(tīng)倒計(jì)時(shí)運(yùn)行，獲取時(shí)間顯示
? ? ? ? ? ? ? ? const { days, hours, minutes, seconds, count } = remainTimeData;
? ? ? ? ? ? ? ? let frontStr = [hours, minutes, seconds].map(fillZero).join(":");
? ? ? ? ? ? ? ? this.timeDisplay = days + "天" + " " + frontStr + "." + fillZero(count);
? ? ? ? ? ? });
? ? ? ? ? ? countdown.start(); //開(kāi)啟倒計(jì)時(shí)
? ? ? ? ? ? // countdown.stop()//停止倒計(jì)時(shí)
? ? ? ? },
? ? ? ? methods: {},
? ? };
</script>
