Javascript计时器秒数在1分钟后加倍

我这里有一把小提琴：

我有一个带有画布动画的间隔计时器，一旦我点击一分钟，秒数开始加倍。有人知道这是什么原因吗

HTML:

var clockTest=新时钟（document.getElementById（“showLoader”），0,0,0,0）；
clockTest.animate（）；

JAVASCRIPT:

function clock(canvas, curPerc, endPercent, minsWatched, secsWatched) {

var self = this;

self.canvas = canvas;
self.curPerc = curPerc;
self.endPercent = endPercent;
self.minsWatched = minsWatched;
self.secsWatched = secsWatched;
self.context = self.canvas.getContext('2d');
self.context.lineWidth = 10;
self.context.strokeStyle = '#ed3f36';

var showPerc = document.getElementById("elapsedTime");
var x = self.canvas.width / 2;
var y = self.canvas.height / 2;
var radius = 75;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;


self.animate = function (current) {

    self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);
    self.context.beginPath();
    self.context.arc(x, y, radius, -(quart), ((circ) * current + 1) - quart, false);
    self.context.stroke();
    self.curPerc++;

    setInterval(function () {
        if (self.secsWatched < 60) {
            self.secsWatched++;
        } else if (self.secsWatched == 60) {
            self.secsWatched = 0;
            self.minsWatched++;
        }

        var time = (self.minsWatched < 10 ? "0" + self.minsWatched : self.minsWatched) + ":" + (self.secsWatched < 10 ? "0" + self.secsWatched : self.secsWatched);
        showPerc.innerHTML = time;

    }, 1000);

    setInterval(function () {
        self.animate(self.endPercent + (self.curPerc / 100));
    }, 60000);



}

功能时钟（canvas、curPerc、endPercent、minsWatched、secsWatched）{
var self=这个；
self.canvas=画布；
self.curPerc=curPerc；
self.endPercent=endPercent；
self.minsweated=minsweated；
self.secsWatched=secsWatched；
self.context=self.canvas.getContext（'2d'）；
self.context.lineWidth=10；
self.context.strokeStyle='#ed3f36'；
var showPerc=document.getElementById（“elapsedTime”）；
var x=self.canvas.width/2；
变量y=self.canvas.height/2；
var半径=75；
var逆时针=假；
var circ=Math.PI*2；
var quart=Math.PI/2；
self.animate=函数（当前）{
self.context.clearRect（0,0，self.canvas.width，self.canvas.height）；
self.context.beginPath（）；
自上下文弧（x，y，半径，-（夸脱），（（圈）*电流+1）-夸脱，假）；
self.context.stroke（）；
self.curPerc++；
setInterval（函数（）{
如果（自采样<60）{
self.secsWatched++；
}else if（self.secsWatched==60）{
self.secsWatched=0；
self.minsweed++；
}
变量时间=（self.minsWatched<10？“0”+self.minsWatched:self.minsWatched）+“：”+（self.secsWatched<10？“0”+self.secsWatched:self.secsWatched）；
showPerc.innerHTML=时间；
}, 1000);
setInterval（函数（）{
self.animate（self.endPercent+（self.curPerc/100））；
}, 60000);
}

}

更新！我刚想出来。我在animate（）中有时钟函数，所以它触发了两次。更新了小提琴，下面的代码正常工作

function clock(canvas, curPerc, endPercent, minsWatched, secsWatched) {

var self = this;

self.canvas = canvas;
self.curPerc = curPerc;
self.endPercent = endPercent;
self.minsWatched = minsWatched;
self.secsWatched = secsWatched;
self.context = self.canvas.getContext('2d');
self.context.lineWidth = 10;
self.context.strokeStyle = '#ed3f36';

var showPerc = document.getElementById("elapsedTime");
var x = self.canvas.width / 2;
var y = self.canvas.height / 2;
var radius = 75;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

setInterval(function () {
        if (self.secsWatched < 60) {
            self.secsWatched++;
        } else if (self.secsWatched == 60) {
            self.secsWatched = 0;
            self.minsWatched++;
        }

        var time = (self.minsWatched < 10 ? "0" + self.minsWatched : self.minsWatched) + ":" + (self.secsWatched < 10 ? "0" + self.secsWatched : self.secsWatched);
        showPerc.innerHTML = time;

    }, 1000);


self.animate = function (current) {

    self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);
    self.context.beginPath();
    self.context.arc(x, y, radius, -(quart), ((circ) * current + 1) - quart, false);
    self.context.stroke();
    self.curPerc++;

    setInterval(function () {
        self.animate(self.endPercent + (self.curPerc / 100));
    }, 60000);



}

功能时钟（canvas、curPerc、endPercent、minsWatched、secsWatched）{
var self=这个；
self.canvas=画布；
self.curPerc=curPerc；
self.endPercent=endPercent；
self.minsweated=minsweated；
self.secsWatched=secsWatched；
self.context=self.canvas.getContext（'2d'）；
self.context.lineWidth=10；
self.context.strokeStyle='#ed3f36'；
var showPerc=document.getElementById（“elapsedTime”）；
var x=self.canvas.width/2；
变量y=self.canvas.height/2；
var半径=75；
var逆时针=假；
var circ=Math.PI*2；
var quart=Math.PI/2；
setInterval（函数（）{
如果（自采样<60）{
self.secsWatched++；
}else if（self.secsWatched==60）{
self.secsWatched=0；
self.minsweed++；
}
变量时间=（self.minsWatched<10？“0”+self.minsWatched:self.minsWatched）+“：”+（self.secsWatched<10？“0”+self.secsWatched:self.secsWatched）；
showPerc.innerHTML=时间；
}, 1000);
self.animate=函数（当前）{
self.context.clearRect（0,0，self.canvas.width，self.canvas.height）；
self.context.beginPath（）；
自上下文弧（x，y，半径，-（夸脱），（（圈）*电流+1）-夸脱，假）；
self.context.stroke（）；
self.curPerc++；
setInterval（函数（）{
self.animate（self.endPercent+（self.curPerc/100））；
}, 60000);
}

---

}

1分钟后，您有2个调用要设置动画。缩短第二个设定间隔；此外，如果美国证券交易委员会

function clock(canvas, curPerc, endPercent, minsWatched, secsWatched) {

var self = this;

self.canvas = canvas;
self.curPerc = curPerc;
self.endPercent = endPercent;
self.minsWatched = minsWatched;
self.secsWatched = secsWatched;
self.context = self.canvas.getContext('2d');
self.context.lineWidth = 10;
self.context.strokeStyle = '#ed3f36';

var showPerc = document.getElementById("elapsedTime");
var x = self.canvas.width / 2;
var y = self.canvas.height / 2;
var radius = 75;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

setInterval(function () {
        if (self.secsWatched < 60) {
            self.secsWatched++;
        } else if (self.secsWatched == 60) {
            self.secsWatched = 0;
            self.minsWatched++;
        }

        var time = (self.minsWatched < 10 ? "0" + self.minsWatched : self.minsWatched) + ":" + (self.secsWatched < 10 ? "0" + self.secsWatched : self.secsWatched);
        showPerc.innerHTML = time;

    }, 1000);


self.animate = function (current) {

    self.context.clearRect(0, 0, self.canvas.width, self.canvas.height);
    self.context.beginPath();
    self.context.arc(x, y, radius, -(quart), ((circ) * current + 1) - quart, false);
    self.context.stroke();
    self.curPerc++;

    setInterval(function () {
        self.animate(self.endPercent + (self.curPerc / 100));
    }, 60000);



}