为什么写完运行时时间不更新而且没有小球效果
var WINDOW_WIDTH=1333;
var WINDOW_HEIGHT=768;
var RADIUS=8;
var MARGIN_TOP=80;
var MARGIN_LEFT=185;
const endTime=new Date(2016, 5, 9, 12, 59, 59);
var curShowTimeSeconds=0;
var balls=[];
const colors=["#09C","#93C","#690","#9C0","#F80","#F44","#CC000C","#A6C","#058","000"];
window.onload=function(){
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");
canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT;
curShowTimeSeconds=getCurrentShowTimeSeconds();
setInterval(/*动画 */
function(){
render(context);
update();
}
,
40
);
}
function getCurrentShowTimeSeconds(){
var curTime=new Date();
var ret=endTime.getTime()-curTime.getTime();
ret=Math.round(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;/*next时间*/
var curHours=parseInt(curShowTimeSeconds/3600);
var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
var curSeconds=curShowTimeSeconds%60;/*cur时间 */
if(nextSeconds!=curSeconds){
if(parseInt(nextHours/10)!=parseInt(curHours/10))
{addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));}
if(parseInt(nextHours%10)!=parseInt(curHours%10))
{addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));}
if(parseInt(nextMinutes/10)!=parseInt(curMinutes/10))
{addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));}
if(parseInt(nextMinutes%10)!=parseInt(curMinutes%10))
{addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));}
if(parseInt(nextSeconds/10)!=parseInt(curSeconds/10))
{addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));}
if(parseInt(nextSeconds%10)!=parseInt(curSeconds%10))
{addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%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>=WINDOW_HEIGHT-RADIUS){
balls[i].y=WINDOW_HEIGHT-RADIUS;
balls[i].vy=-balls[i].vy*0.75;
}
}
}
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 aBall={
x:x+2*j*(RADIUS+1)+(RADIUS+1),
y:y+2*i*(RADIUS+1)+(RADIUS+1),
g:1.5+Math.random(),
vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,
vy:-5,
color:colors[Math.floor(Math.random()*colors.length)],
}
balls.push(aBall);
}
}
}
}
function render(ctx){/*时间总体绘图 */
ctx.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);/*canvas内画面刷新 */
var hours=parseInt(curShowTimeSeconds/3600);
var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
var seconds=curShowTimeSeconds%60;
renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10), ctx)/*小时的十位数*/
renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,hours-10*parseInt(hours/10),ctx)/*小时的个位数*/
renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx)/*冒号*/
renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx)/*分钟十位数*/
renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx)/*分钟个位数*/
renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx)/* */
renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx)
renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx)
for(var i=0;i<=balls.length;i++){
ctx.fillStyle=balls[i].color;
ctx.beginPath();
ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
}
}
function renderDigit(x,y,num,ctx){/*时间点阵内绘图 */
ctx.fillStyle="blueviolet";
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){
ctx.beginPath()
ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI)
ctx.closePath()
ctx.fill()
}
}
}
}
