0
後增加了一倍我這裏有一個小提琴：http://jsfiddle.net/armedstar/zgM9X/的Javascript計時器秒1分鐘
我有一個帆布動畫間隔定時器，一旦我打一分鐘，秒數開始翻倍。任何人都知道可能是由什麼造成的？
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);
}
}
更新！只是想通了。我在animate（）裏面有clock函數，所以它發射了兩次。更新了小提琴和下面的代碼作品。
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);
}
}