Question

我有一个小提琴：http://jsfiddle.net/armedstar/zgM9X/

我有一个带画布动画的间隔计时器，一旦我打了一分钟，秒就会开始加倍。任何人都知道可能导致这种情况的原因吗？

HTML：

<div id="loader"><canvas id="showLoader" width="250" height="250"></canvas><div id="showTimer"><p id="elapsedTime">

  <script>
    var clockTest = new clock(document.getElementById("showLoader"), 0, 0, 0, 0);
    clockTest.animate();
  </script>

</p></div></div>

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);



}

}

UPDATE！刚想通了。我在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);



}

}

Answer 1

1分钟后你有2次动画调用。剪掉第二个setInterval;此外，如果sec <60是多余的 P.S。：我喜欢你的python javascript方式

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

1 个答案: