Vue 可暂停计时器

<div>{{timeDisplay}}</div>

js文件countdown.js代码

export const CountdownEventName={//监听事件名称START :'start',RUNNING :'running',STOP :'stop',}const CountdownStatus={//倒计时状态RUNNING :'running',STOPED :'stoped'}export function fillZero(num) {//保证取两位数字，只有一位的话补上0return `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 = 1static 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_MILLISECONDstatic DAY_IN_MILLISECOND=24 * Countdown.HOUR_IN_MILLISECONDconstructor(endTime,step){this.endTime=endTimethis.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.RUNNINGthis.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=remainTimeconst days=Math.floor(time/Countdown.DAY_IN_MILLISECOND)time=time%Countdown.DAY_IN_MILLISECONDconst 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}}}

<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() {// 第一个参数是停止时间，第二个参数是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>

Vue 可暂停计时器相关推荐

vue.js动态计时器_基于Vue.js的Pomodoro技术计时器
vue.js动态计时器番茄 (pomodoro) Timer for Pomodoro Technique built on Vue.js 2.0 with PWA 基于PWA的Vue.js 2.0 ...
android如何暂停倒计时,Android – 如何停止和暂停计时器
我一直在经历很多问题尝试暂停和取消暂停计时器,如果我将方向锁定为纵向或横向它可以工作,但这不完全是我想要做的.当然,当您更改方向时会调用onCreate方法,因此我取消了我的timertask并将其设 ...
html使用vue实现秒表,vue中使用时间计时器
vue中我们会使用各种倒计时的方法这里就为大家提供一个计时器的方法, 话不多说代码走起: 点击暂停重置继续 {{str}} export default { name:"homepag ...
html暂停计时器,JS实现可暂停秒表计时器效果的方法
JS实现可暂停秒表计时器效果的方法发布时间:2020-10-22 14:35:00 来源:亿速云阅读:122 作者:小新这篇文章给大家分享的是有关JS实现可暂停秒表计时器效果的方法的内容.小编觉 ...
使用vue写一个计时器
** 首先我们要知道setTimeout和setInterval的区别 ** setTimeout只在指定时间后执行一次,代码如下: <script> //定时器异步运行 functio ...
java暂停计时器_Java/Android计时器（开始，暂停，恢复，停止）
由于要做暂停和恢复,这里我就没有使用Android的CountDownTimer,而是用了Java的Timer.所以,这个方法在java肯定是通用.我也外加了Android独有的Service,有些计 ...
python如何暂停计时器_python怎么设置计时器
python设置计时器的方法: 1.使用time.time()获取开始与结束的时间,将两个时间相减即可进行计时import time time_start = time.time() #开始计时 #要 ...
Vue中验证码计时器的制作
关键技术: setInterval clearInterval ヽ(●-`Д´-)ノ由于setInterval不能传递参数,导致不能直接通过参数来完成计时器. 我才用的方式为改变DOM,通过监听DO ...
python画完图程序暂停运行_[Python实战]你也能写的计时器程序
文章地址:[Python实战]你也能写的计时器程序上次,公众号介绍了如何使用 Pyqt5 制作猜数游戏界面,并介绍了如何在 Pycharm 中使用 Qt Designer 生成 UI 文件.这次,我 ...

Vue 可暂停计时器

Vue 可暂停计时器相关推荐

最新文章

热门文章