使用javascript链接多个时间戳的自定义计时器

因此，我一直在开发js倒计时计时器，并添加了该功能，以便您可以通过操纵属性（

data next

）来链接多个时间戳。我不确定的是，我正在

start

内部调用方法

start

，这将为该函数创建多个调用堆栈。所以我只想知道它是否会造成问题？如果您有任何其他关于链接的建议或其他建议，我很高兴知道：）

是的，我知道有很多插件，我可以用来完成这一点，但我只是想创建我自己的，是简单和易于定制，以满足我的需要

HTML

天数：DD
小时：HH
分钟：嗯
秒：SS

javascript:

class Timer{
    constructor(timer, args = {}){
        this.timer = document.querySelector(timer);
        this.duration = this.__duration__();
        this.chain = args.chain;
    }

    __duration__ = () => {
        var d = this.timer.querySelector('.days').dataset.attr?parseInt(this.timer.querySelector('.days').dataset.attr):0;
        var h = this.timer.querySelector('.hours').dataset.attr?parseInt(this.timer.querySelector('.hours').dataset.attr):0;
        var m = this.timer.querySelector('.minutes').dataset.attr?parseInt(this.timer.querySelector('.minutes').dataset.attr):0;
        var s = this.timer.querySelector('.seconds').dataset.attr?parseInt(this.timer.querySelector('.seconds').dataset.attr):0;

        return (s*1000)+(m*60*1000)+(h*60*60*1000)+(d*24*60*60*1000)+1000;
    }

    start = () => {
    document.dispatchEvent(Timer.begin)
        this.end = (new Date().getTime()) + this.duration;
        const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24;
        this.int = setInterval(() => {
            this.diff = this.end - (new Date().getTime());
            this.timer.querySelector('.days').innerText = (Math.floor(this.diff / (day)).toString().padStart(2, 0));
            this.timer.querySelector('.hours').innerText = (Math.floor((this.diff % (day)) / (hour)).toString().padStart(2, 0));
            this.timer.querySelector('.minutes').innerText = (Math.floor((this.diff % (hour)) / (minute)).toString().padStart(2, 0));
            this.timer.querySelector('.seconds').innerText = (Math.floor((this.diff % (minute)) / (second)).toString().padStart(2, 0));

            if (Math.floor(this.diff/1000) <= 0){
                document.dispatchEvent(Timer.timeout)
                this.stop();
                if (this.chain){
                    this.__reinit__();
                    if (this.duration){
                        this.start();
                    }
                }
            }
        }, second);
    }

    __reinit__ = () => {
        this.timer.querySelector('.days').dataset.attr = this.timer.querySelector('.days').dataset.next;
        this.timer.querySelector('.hours').dataset.attr = this.timer.querySelector('.hours').dataset.next;
        this.timer.querySelector('.minutes').dataset.attr = this.timer.querySelector('.minutes').dataset.next;
        this.timer.querySelector('.seconds').dataset.attr = this.timer.querySelector('.seconds').dataset.next;

        this.timer.querySelector('.days').dataset.next = 0;
        this.timer.querySelector('.hours').dataset.next = 0;
        this.timer.querySelector('.minutes').dataset.next = 0;
        this.timer.querySelector('.seconds').dataset.next = 0;

        this.duration = this.__duration__();
    }

    stop = () => {
        clearInterval(this.int);
    }

    static timeout = new Event('timeout');
  static begin =  new Event('begin');
}


timer = new Timer('#timer',{chain: true}); //initializing new Timer object using css selector
timer.start(); //start timer

//add listener to the event
document.addEventListener('timeout', function (e) {
    document.querySelector('.message').innerText = 'Time Out';
}, false);

类计时器{
构造函数（计时器，args={}）{
this.timer=document.querySelector（计时器）；
this.duration=这个；
this.chain=args.chain；
}
__持续时间=（）=>{
var d=this.timer.querySelector（'.days'）.dataset.attr？parseInt（this.timer.querySelector（'.days'）.dataset.attr）：0；
var h=this.timer.querySelector（'.hours'）.dataset.attr？parseInt（this.timer.querySelector（'.hours'）.dataset.attr）：0；
var m=this.timer.querySelector（'.minutes'）.dataset.attr？parseInt（this.timer.querySelector（'.minutes'）.dataset.attr）：0；
var s=this.timer.querySelector（'.seconds'）.dataset.attr？parseInt（this.timer.querySelector（'.seconds'）.dataset.attr）：0；
返回（s*1000）+（m*60*1000）+（h*60*60*1000）+（d*24*60*60*1000）+1000；
}
开始=（）=>{
document.dispatchEvent（Timer.begin）
this.end=（new Date（）.getTime（））+this.duration；
常数秒=1000，分钟=秒*60，小时=分钟*60，天=小时*24；
this.int=setInterval（（）=>{
this.diff=this.end-（new Date（）.getTime（））；
this.timer.querySelector（'.days'）.innerText=（Math.floor（this.diff/（day））.toString（）.padStart（2,0））；
this.timer.querySelector（'.hours'）.innerText=（Math.floor（（this.diff%（day））/（hours））.toString（）.padStart（2,0））；
this.timer.querySelector（'.minutes'）.innerText=（Math.floor（（this.diff%（hour））/（minute））.toString（）.padStart（2,0））；
this.timer.querySelector（'.seconds'）.innerText=（Math.floor（（this.diff%（分钟））/（秒））.toString（）.padStart（2,0））；
if（数学楼层（此差值/1000）{
this.timer.querySelector（'.days'）.dataset.attr=this.timer.querySelector（'.days'）.dataset.next；
this.timer.querySelector（'.hours'）.dataset.attr=this.timer.querySelector（'.hours'）.dataset.next；
this.timer.querySelector（'.minutes'）.dataset.attr=this.timer.querySelector（'.minutes'）.dataset.next；
this.timer.querySelector（'.seconds'）.dataset.attr=this.timer.querySelector（'.seconds'）.dataset.next；
this.timer.querySelector（'.days'）.dataset.next=0；
this.timer.querySelector（'.hours'）.dataset.next=0；
this.timer.querySelector（'.minutes'）.dataset.next=0；
this.timer.querySelector（'.seconds'）.dataset.next=0；
this.duration=这个；
}
停止=（）=>{
clearInterval（this.int）；
}
静态超时=新事件（“超时”）；
静态开始=新事件（“开始”）；
}
timer=new timer（'#timer'，{chain:true}）；//使用css选择器初始化新的计时器对象
timer.start（）；//启动计时器
//将侦听器添加到事件
document.addEventListener（'timeout'，函数（e）{
document.querySelector（'.message'）.innerText='timeout'；
}，假）；

class语法在我看来是错误的。

class{method（）{}

它会在我的编辑器和浏览器中生成语法错误。更不用说，该链接不建议它工作。它只是关于箭头函数

这个

上下文，如果这是有效的语法，它仍然只适用于类，而不是。您的问题还不完全清楚，

next

之后是否有任何链只有两个吗？如果您的问题是：我可以从内部调用

start（）

，那么是的，只要您确保所有间隔和其他正在运行的代码都已停止，就可以了。提示：您不需要继续调用

querySelector（）

，因为您不需要一直搜索相同的元素。一旦有了引用，您可以将其存储在构造函数中：

this.d=this.timer.querySelector（'.days'）

，就像@StackSlave所说的，您不需要在类方法中使用额外的箭头符号

class Timer{
    constructor(timer, args = {}){
        this.timer = document.querySelector(timer);
        this.duration = this.__duration__();
        this.chain = args.chain;
    }

    __duration__ = () => {
        var d = this.timer.querySelector('.days').dataset.attr?parseInt(this.timer.querySelector('.days').dataset.attr):0;
        var h = this.timer.querySelector('.hours').dataset.attr?parseInt(this.timer.querySelector('.hours').dataset.attr):0;
        var m = this.timer.querySelector('.minutes').dataset.attr?parseInt(this.timer.querySelector('.minutes').dataset.attr):0;
        var s = this.timer.querySelector('.seconds').dataset.attr?parseInt(this.timer.querySelector('.seconds').dataset.attr):0;

        return (s*1000)+(m*60*1000)+(h*60*60*1000)+(d*24*60*60*1000)+1000;
    }

    start = () => {
    document.dispatchEvent(Timer.begin)
        this.end = (new Date().getTime()) + this.duration;
        const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24;
        this.int = setInterval(() => {
            this.diff = this.end - (new Date().getTime());
            this.timer.querySelector('.days').innerText = (Math.floor(this.diff / (day)).toString().padStart(2, 0));
            this.timer.querySelector('.hours').innerText = (Math.floor((this.diff % (day)) / (hour)).toString().padStart(2, 0));
            this.timer.querySelector('.minutes').innerText = (Math.floor((this.diff % (hour)) / (minute)).toString().padStart(2, 0));
            this.timer.querySelector('.seconds').innerText = (Math.floor((this.diff % (minute)) / (second)).toString().padStart(2, 0));

            if (Math.floor(this.diff/1000) <= 0){
                document.dispatchEvent(Timer.timeout)
                this.stop();
                if (this.chain){
                    this.__reinit__();
                    if (this.duration){
                        this.start();
                    }
                }
            }
        }, second);
    }

    __reinit__ = () => {
        this.timer.querySelector('.days').dataset.attr = this.timer.querySelector('.days').dataset.next;
        this.timer.querySelector('.hours').dataset.attr = this.timer.querySelector('.hours').dataset.next;
        this.timer.querySelector('.minutes').dataset.attr = this.timer.querySelector('.minutes').dataset.next;
        this.timer.querySelector('.seconds').dataset.attr = this.timer.querySelector('.seconds').dataset.next;

        this.timer.querySelector('.days').dataset.next = 0;
        this.timer.querySelector('.hours').dataset.next = 0;
        this.timer.querySelector('.minutes').dataset.next = 0;
        this.timer.querySelector('.seconds').dataset.next = 0;

        this.duration = this.__duration__();
    }

    stop = () => {
        clearInterval(this.int);
    }

    static timeout = new Event('timeout');
  static begin =  new Event('begin');
}


timer = new Timer('#timer',{chain: true}); //initializing new Timer object using css selector
timer.start(); //start timer

//add listener to the event
document.addEventListener('timeout', function (e) {
    document.querySelector('.message').innerText = 'Time Out';
}, false);