const WINDOW_WIDTH = 1100; const WINDOW_HEIGHT = 900; const RADIUS = 6; const TOP = 60; const LEFT = 60; var endTime = new Date(2015,8,22,0,0,0); var cutTimeSeconds = 0; var balls = []; var colors = ["#33b5e5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ff8800","#ff4444","#cc0000","ffbb33"]; /****************************************************************************************************window.onload*/ window.onload = function(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.width = WINDOW_WIDTH; canvas.height = WINDOW_HEIGHT; cutTimeSeconds = getCutTimeSeconds(); setInterval(function(){ render(context); update();}, 1000/60); }; /****************************************************************************************************getCutTimeSeconds()*/ function getCutTimeSeconds(){ var nowTime = new Date(); var ret = endTime.getTime() - nowTime.getTime(); ret = Math.round(ret/1000); return ret >= 0 ? ret : 0; }; /**************************************************************************************************************update()*/ function update(){ var nextTimeSeconds = getCutTimeSeconds(); // 下一秒需要变化的时间 var nextHours = parseInt(nextTimeSeconds / 3600); var nextMinutes = parseInt((nextTimeSeconds - nextHours*3600) / 60); var nextSeconds = parseInt(nextTimeSeconds%60); var cutHours = parseInt(cutTimeSeconds / 3600); var cutMinutes = parseInt((cutTimeSeconds - cutHours*3600) / 60); var cutSeconds = parseInt(cutTimeSeconds%60); if (nextSeconds != cutSeconds) { if (parseInt(cutHours/10) != parseInt(nextHours/10)) { addBall(LEFT , TOP , parseInt(cutHours/10)); }; if (parseInt(cutHours%10) != parseInt(nextHours%10)) { addBall(LEFT+15*(RADIUS+1) , TOP , parseInt(cutHours%10)); }; if (parseInt(cutMinutes/10) != parseInt(nextMinutes/10)) { addBall(LEFT+40*(RADIUS+1) , TOP , parseInt(cutMinutes/10)); }; if (parseInt(cutMinutes%10) != parseInt(nextMinutes%10)) { addBall(LEFT+55*(RADIUS+1) , TOP , parseInt(cutMinutes%10)); }; if (parseInt(cutSeconds/10) != parseInt(nextSeconds/10)) { addBall(LEFT+80*(RADIUS+1) , TOP , parseInt(cutSeconds/10)); }; if (parseInt(cutSeconds%10) != parseInt(nextSeconds%10)) { addBall(LEFT+95*(RADIUS+1) , TOP , parseInt(cutSeconds%10)); }; cutTimeSeconds = nextTimeSeconds; } updateBalls(); } /*********************************************************************************************************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].a; if (balls[i].y >= WINDOW_HEIGHT - RADIUS) // 判断底部边缘的碰撞事件 { balls[i].y = WINDOW_HEIGHT - RADIUS; balls[i].vy = -balls[i].vy*0.75; }; }; } function addBall(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+(RADIUS+1)+j*2*(RADIUS+1), y:y+(RADIUS+1)+i*2*(RADIUS+1), a:2+Math.random(), vx:Math.pow(-1,Math.random()*10)*4, vy:-5+Math.random(), ballColor:colors[Math.floor(Math.random()*colors.length)] } balls.push(ball);// 将小球放入数组balls中 } } } } function render(cxt){ cxt.clearRect(0 , 0 , canvas.width , canvas.height ); // 每次调用时,清除canvas画布 var hours = parseInt(cutTimeSeconds / 3600); var minutes = parseInt((cutTimeSeconds - hours*3600) / 60); var seconds = parseInt(cutTimeSeconds%60); renderDigit(LEFT , TOP , parseInt(hours/10) , cxt); renderDigit(LEFT+15*(RADIUS+1) , TOP , parseInt(hours%10) , cxt); renderDigit(LEFT+30*(RADIUS+1) , TOP , 10 , cxt); renderDigit(LEFT+40*(RADIUS+1) , TOP , parseInt(minutes/10) , cxt); renderDigit(LEFT+55*(RADIUS+1) , TOP , parseInt(minutes%10) , cxt); renderDigit(LEFT+70*(RADIUS+1) , TOP , 10 , cxt); // 绘制时钟冒号 renderDigit(LEFT+80*(RADIUS+1) , TOP , parseInt(seconds/10) , cxt); renderDigit(LEFT+95*(RADIUS+1) , TOP , parseInt(seconds%10) , cxt); for (var i = 0; i < balls.length; i++) { cxt.fillStyle = balls[i].ballColor; cxt.beginPath(); cxt.arc(balls[i].x ,balls[i].y , RADIUS , 0 ,2*Math.PI); cxt.closePath(); }; }; /********************************************************************************************renderDigit(x , y , num , cxt)*/ function renderDigit(x , y , num , cxt){ // 该函数用于绘制数字 cxt.fillStyle = 'rgb(0 , 102 , 153)'; // 设置绘图颜色 for (var n = 0 ; n<digit[num].length ; n++ ) // 遍历digit[num]数组;n:行 { for (var m = 0 ; m<digit[num][n].length ; m++ ) // 再遍历digit[num][n]数组;m:列 { if (digit[num][n][m] == 1) { cxt.beginPath(); cxt.arc(x+(RADIUS+1)+m*2*(RADIUS+1) , y+(RADIUS+1)+n*2*(RADIUS+1) , RADIUS , 0 , 2*Math.PI); cxt.closePath(); cxt.fill(); } } } };
var endTime = new Date(2015,8,22,0,0,0);
这句话是定义终点时间的,如果定义的比当前时间小,你通过getCutTimeSeconds()计算出的cutTimeSeconds和nextTimeSeconds都是0,所以nextSeconds != cutSeconds就会始终为 false。