Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/373.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何通过单击动态计时器来停止它们?_Javascript_Php_Jquery_Timer - Fatal编程技术网

Javascript 如何通过单击动态计时器来停止它们?

Javascript 如何通过单击动态计时器来停止它们?,javascript,php,jquery,timer,Javascript,Php,Jquery,Timer,我有一个场景,我需要动态添加计时器。这意味着我需要显示数据库中没有记录的记录,并在末尾使用计时器。我已经完成了以下代码 JavaScript中的我的计时器函数 timer.js var Timer; var TotalSeconds; function CreateTimer(TimerID, Time){ var oop=this; this.Timer = document.getElementById(TimerID); this.TotalSeconds = T

我有一个场景,我需要动态添加计时器。这意味着我需要显示数据库中没有记录的记录,并在末尾使用计时器。我已经完成了以下代码

JavaScript中的我的计时器函数

timer.js

var Timer;
var TotalSeconds;

function CreateTimer(TimerID, Time){
    var oop=this;
    this.Timer = document.getElementById(TimerID);
    this.TotalSeconds = Time;
    this.update();
    oop.to=setTimeout(function(){ oop.tick(); }, 1000);
}

CreateTimer.prototype={
    tick:function(){
    var oop=this;
    if (this.TotalSeconds <= 0){
        return;
    }
    this.TotalSeconds -= 1;
    this.update()
    oop.to=setTimeout(function(){ oop.tick(); }, 1000);
},

update:function(){
    var Seconds = this.TotalSeconds,Days = Math.floor(Seconds / 86400);
    Seconds -= Days * 86400;
    var Hours = Math.floor(Seconds / 3600);
    Seconds -= Hours * (3600);
    var Minutes = Math.floor(Seconds / 60);
    Seconds -= Minutes * (60);
    var TimeStr = ((Days > 0) ? Days + " days " : "") +
    LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)
    this.Timer.innerHTML = TimeStr;
}, 

stop:function(){
    clearTimeout(this.to);
}
}

function LeadingZero(Time){
    return (Time < 10) ? "0" + Time : + Time;
}
它只能正常工作。我想它是在显示计时器。我需要停止计时器,同时点击它。我不知道该怎么做


请帮我解决这个问题。

如果这是您希望所有计时器都包含的功能,我会封装它。像这样:

//...
function CreateTimer(TimerID, Time){
    var oop=this;
    this.Timer = document.getElementById(TimerID);
    // here. add Event listener to the DOM element
    var self = this; //save self
    this.timer.addEventListener('click', function() {
        self.stop();
    });
    // ## end ##
    this.TotalSeconds = Time;
    this.update();
    oop.to=setTimeout(function(){ oop.tick(); }, 1000);
}
//...

onclick事件,或单击某个id时触发的函数?@royalBg:我可以使用onclick事件。但在那里,我无法传递那个特定的计时器对象。其实我不知道。
{
    // other codes
    timer+i = new CreateTimer('timer'+i, 60);
}
//...
function CreateTimer(TimerID, Time){
    var oop=this;
    this.Timer = document.getElementById(TimerID);
    // here. add Event listener to the DOM element
    var self = this; //save self
    this.timer.addEventListener('click', function() {
        self.stop();
    });
    // ## end ##
    this.TotalSeconds = Time;
    this.update();
    oop.to=setTimeout(function(){ oop.tick(); }, 1000);
}
//...