用了window.requestAnimationFrame()，改成能夠手動設(shè)定倒計時時間后，出現(xiàn)了bug
當(dāng)采用window.requestAnimationFrame()來完成動畫之后沒有出現(xiàn)bug，但是加了幾個輸入框方便改變倒計時的時間之后，就出現(xiàn)了bug，它不會自動進行動畫的繪制了，以下是主要代碼部分，希望高手能夠幫我解決一下。
html代碼部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
width: 100%;
height: 90%;
}
canvas{
width: 100%;
height:90%;
}
#start{
width: 100px;
height: 100px;
border-radius: 50px;
background-color: coral;
color: white;
font-family: "微軟雅黑";
font-size: 33px;
position: absolute;
border:none;
top:60%;
}
</style>
</head>
<body>
<form>
<input type="number" id="hours" max="23" min="0" value="23"/>時
<input type="number" id="minutes" max="59" min="0" value="12"/>分
<input type="number" id="seconds" max="59" min="0" value="12"/>秒
<input type="submit" id="start" value="開始">
</form>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript" src="js/jquery-2.2.4.min.js" ></script>
<script type="text/javascript" src="js/commonFunctions.js" ></script>
<script type="text/javascript" src="js/digit.js" ></script>
<script type="text/javascript" src="js/count.js" ></script>
</html>
commonFunctions.js代碼部分
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
return window.setTimeout(callback, 1000 / 60);
};
})();
count.js代碼部分
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
var DIS;
var endTime = new Date(2016,4,26,23,18,0);
var curShowTimeSeconds = 0
var canvas;
var context;
var balls = [];
const colors = ["#2e7dcc","#27f1eb","#27f179","#9df127","#f1ef27"
,"#f7cd6e","#f7bb6e","#f78f6e","#f76e95","#f76eda","#c56ef7","#996ef7"];
const speed =[-3,-2.5,-2,2,2.5,3];
window.onload = function(){
CANVAS_WIDTH = document.body.clientWidth;
CANVAS_HEIGHT = document.body.clientHeight*0.8;
MARGIN_LEFT = Math.round(CANVAS_WIDTH/20);
RADIUS = Math.round((5/1200)*CANVAS_WIDTH);
DIS = Math.round((6/1200)*CANVAS_WIDTH);
? ? canvas = document.getElementById('canvas');
? ? context = canvas.getContext("2d");
? ? canvas.width = WINDOW_WIDTH;
? ? canvas.height = WINDOW_HEIGHT;
? ? drawtime(0,0,0);
? ? curShowTimeSeconds = getCurrentShowTimeSeconds();
$("#start").click(function(){
var hours = parseInt(document.getElementById("hours").value);
? ? var minutes= parseInt(document.getElementById("minutes").value);
? ? var seconds= parseInt(document.getElementById("seconds").value);
? ? var currentTime = new Date();
? ? hours+=currentTime.getHours();
? ? minutes+=currentTime.getMinutes();
? ? seconds+=currentTime.getSeconds();
endTime = new Date(currentTime.getFullYear(),currentTime.getMonth(),currentTime.getDate(),hours,minutes,seconds);
curShowTimeSeconds = getCurrentShowTimeSeconds();
upDate();
});
}
function upDate(){
window.requestAnimFrame(upDate);
? ? render();
? ? update();
}
function getCurrentShowTimeSeconds() {
? ? var curTime = new Date();
? ? var ret =endTime.getTime() - curTime.getTime();
? ? ret /=1000;
? ? return ret >= 0 ? ret : 0;
}
function update(){
? ? var nextShowTimeSeconds = getCurrentShowTimeSeconds();
? ? var nextHours = parseInt( nextShowTimeSeconds / 3600);
? ? var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 );
? ? var nextSeconds = nextShowTimeSeconds % 60;
? ? var curHours = parseInt( curShowTimeSeconds / 3600);
? ? var curMinutes = parseInt( (curShowTimeSeconds - curHours * 3600)/60 );
? ? var curSeconds = curShowTimeSeconds % 60;
? ? if( nextSeconds != curSeconds ){
? ? ? ? if( parseInt(curHours/10) != parseInt(nextHours/10) ){
? ? ? ?
? ? ? ? ? ? addBalls( MARGIN_LEFT + 0 , MARGIN_TOP , parseInt(curHours/10) );
? ? ? ? }
? ? ? ? if( parseInt(curHours%10) != parseInt(nextHours%10) ){
? ? ? ? ? ? addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHours/10) );
? ? ? ? }
? ? ? ? if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
? ? ? ? ? ? addBalls( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes/10) );
? ? ? ? }
? ? ? ? if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
? ? ? ? ? ? addBalls( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes%10) );
? ? ? ? }
? ? ? ? if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
? ? ? ? ? ? addBalls( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(curSeconds/10) );
? ? ? ? }
? ? ? ? if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
? ? ? ? ? ? addBalls( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds%10) );
? ? ? ? }
? ? ? ? curShowTimeSeconds = nextShowTimeSeconds;
? ? }
? ? updateBalls();
}
function updateBalls(){
for(var i=0;i != balls.length; ++i){
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
if(balls[i].y >= CANVAS_HEIGHT - RADIUS){
balls[i].y = CANVAS_HEIGHT - RADIUS;
balls[i].vy = -0.75*balls[i].vy;
}
}
var cnt =0;
for(var j=0;j !=balls.length;++j){
if(balls[j].x +RADIUS >0&& balls[j].x -RADIUS<CANVAS_WIDTH){
balls[cnt++] = balls[j];
}
}
while(balls.length>Math.min(300,cnt)){
balls.pop();
}
}
function addBalls(x,y,num){
for(var i = 0;i != digit[num].length; ++i){
for(var j=0;j != digit[num][i].length; ++j){
if(digit[num][i][j] == 1){
var ball = {
x:x+(j+1)*(RADIUS+DIS),
y:y+(i+1)*(RADIUS+DIS),
r:RADIUS,
color:colors[Math.floor(Math.random()*colors.length)],
g:0.3+Math.random(),
vx:speed[Math.floor(Math.random()*speed.length)],
vy:0
}
balls.push(ball);
}
}
}
}
function drawtime(hours,minutes,seconds){
draw(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10));
draw(MARGIN_LEFT+8*(RADIUS+DIS),MARGIN_TOP,parseInt(hours%10));
draw(MARGIN_LEFT+18*(RADIUS+DIS),MARGIN_TOP,10);
draw(MARGIN_LEFT+25*(RADIUS+DIS),MARGIN_TOP,parseInt(minutes/10));
draw(MARGIN_LEFT+33*(RADIUS+DIS),MARGIN_TOP,parseInt(minutes%10));
draw(MARGIN_LEFT+43*(RADIUS+DIS),MARGIN_TOP,10);
draw(MARGIN_LEFT+50*(RADIUS+DIS),MARGIN_TOP,parseInt(seconds/10));
draw(MARGIN_LEFT+58*(RADIUS+DIS),MARGIN_TOP,parseInt(seconds%10));
}
function render(){
? ? context.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);
? ? var hours = parseInt( curShowTimeSeconds / 3600);
? ? var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 );
? ? var seconds = curShowTimeSeconds % 60;
? ? drawtime(hours,minutes,seconds);
? ? for( var i = 0 ; i < balls.length ; i ++ ){
? ? ? ? context.fillStyle=balls[i].color;
? ? ? ? context.beginPath();
? ? ? ? context.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
? ? ? ? context.closePath();
? ? ? ? context.fill();
? ? }
}
function draw(x,y,number){
context.fillStyle = "rgb(0,102,153)";
for(var i = 0; i!=digit[number].length; ++i){
for(var j =0; j!=digit[number][i].length; ++j){
if(digit[number][i][j] == 1){
context.beginPath();
context.arc(x+(j+1)*(RADIUS+DIS),y+(i+1)*(RADIUS+DIS),RADIUS,0,2*Math.PI)
context.closePath();
context.fill();
}
}
}
}
