var WINDOW_WIDTH=1024;

var WINDOW_HEIGHT=768;

var MARGIN_LEFT=30;

var MARGIN_TOP=60;

var RADIUS=8;

const endTime=new Date(2015,9,12,10,10,10);

var curshowTimeSeconds=0;

var Balls=[];

const colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]

window.onload=function(){

var canvas=document.getElementById('canvas');

var context=canvas.getContext("2d");

canvas.height=WINDOW_HEIGHT;

canvas.width=WINDOW_WIDTH;

? ? curshowTimeSeconds=getcurshowTimeSeconds()

? ??

? ? setInterval(

? ? function(){

? ? render(context);

? ? update();

? ? },

? ? 50

? ? );

}

function getcurshowTimeSeconds(){

var curTime=new Date();

var ret=endTime.getTime()-curTime.getTime();

ret=Math.round(ret/1000);

return ret>=0 ?ret:0;

}

function update(){

?var nextshowTimeSeconds=getcurshowTimeSeconds();

?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(curseconds!=nextseconds){

? ? ? ? if(parseInt(curhours/10)!=parseInt(nexthours/10))

? ? ? ? { addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10))};

? ? ? ? if(parseInt(curhours%10)!=parseInt(nexthours%10))

? ? ? ? { addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10))};

? ? ? ? if(parseInt(curminutes/10)!=parseInt(nextminutes/10))

? ? ? ? { addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10))};

? ? ? ? if(parseInt(curminutes%10)!=parseInt(nextminutes%10))

? ? ? ? { addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10))};

? ? ? ? if(parseInt(curseconds/10)!=parseInt(nextseconds/10))

? ? ? ? { addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10))};

? ? ? ? if(parseInt(curseconds%10)!=parseInt(nextseconds%10))

? ? ? ? { addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%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.radom()*1000))*4,

? ? ? ? ? ? vy:-5,

? ? ? ? ? ? color:colors[Math.floor(Math.random()*colors.length)] ? ?

?}

? ? ? ? Balls.push( aBall );

}

function render( cxt ){

? ? cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);

? ??

? ? var hours = parseInt(curshowTimeSeconds/3600 );

? ? var minutes = parseInt((curshowTimeSeconds-hours*3600)/60); ??

? ? var seconds = curshowTimeSeconds%60

? ? renderDigit(margin_left, margin_top, parseInt(hours / 10), cxt);

? ? ? ? renderDigit(margin_left + 15 * (radius + 1), margin_top, parseInt(hours % 10), cxt);

? ? ? ? renderDigit(margin_left + 30 * (radius + 1), margin_top, 10, cxt);

? ? ? ? renderDigit(margin_left + 39 * (radius + 1), margin_top, parseInt(minutes / 10), cxt);

? ? ? ? renderDigit(margin_left + 54 * (radius + 1), margin_top, parseInt(minutes % 10), cxt);

? ? ? ? renderDigit(margin_left + 69 * (radius + 1), margin_top, 10, cxt);

? ? ? ? renderDigit(margin_left + 78 * (radius + 1), margin_top, parseInt(seconds / 10), cxt);

? ? ? ? renderDigit(margin_left + 93 * (radius + 1), margin_top, parseInt(seconds % 10), cxt);

? ? ? ? for (var i = 0; i < balls.length; i++) {

? ? ? ? ? ??

? ? cxt.fillStyle=Balls[i].color;

? ? cxt.beginPath();

? ? cxt.arc(Balls[i].x,Balls[i].y,RADIUS,0,2*Math.PI,ture);

? ? cxt.closePath();

? ? cxt.fill();

? ? }

}

? ??

function renderDigit( x , y , num , cxt ){

? ? cxt.fillStyle = "blue";

? ? 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 ){

? ? ? ? ? ? ? ? cxt.beginPath();

? ? ? ? ? ? ? ? cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 , 2*Math.PI )

? ? ? ? ? ? ? ? cxt.closePath()

? ? ? ? ? ? ? ? cxt.fill()

? ? ? ? ? ? }

}