//?JavaScript?Document
var?WINDOW_WIDTH=1328;
var?WINDOW_HEIGHT=768;
var?Radius=10;
var?Margintop=60;
var?Marginleft=30;
const?endtime=new?Date(2017,3,4,12,30,00,00);?//截止時(shí)間
var?curshowtimeseconds=0;//表示現(xiàn)在倒計(jì)時(shí)需要多少秒

var?ball=[];
const?colors=['#33b5e5','#0099cc','#aa66cc','#9933cc',
????'#99cc00','#669900','#ffbb33','#ff8800',"#ff8844",'#cc0000']
window.onload=function(){
	var?canvas=document.getElementById("mycanvas");
	canvas.width=WINDOW_WIDTH;
	canvas.height=WINDOW_HEIGHT;

	var?context=canvas.getContext("2d");
	curshowtimeseconds=getCurrentShowTimeSeconds();
	setInterval(
	??function(){
		??render(context);
		??update();
		??},50
	);
	
	}
function?update(){
	var?nextshowtimeseconds=getCurrentShowTimeSeconds();
	var?nexthour=parseInt(nextshowtimeseconds/3600);
	var?nextminutes=parseInt((nextshowtimeseconds-nexthour*3600)/60);
	var?nextseconds=parseInt(nextshowtimeseconds%60);
	var?curhour=parseInt(curshowtimeseconds/3600);
	var?curminutes=parseInt((curshowtimeseconds-curhour*3600)/60);
	var?curseconds=parseInt(curshowtimeseconds%60);
	
	if(nextseconds!=curseconds){
		curshowtimeseconds=nextshowtimeseconds;
		if(parseInt(curhour?/?10)!=parseInt(nexthour/10)){
			addballs(Marginleft,Margintop,parseInt(curhour/10))
			}
		if(parseInt(curhour%10)!=parseInt(nexthour%10)){
			addballs(Marginleft+15*(Radius+1),Margintop,parseInt(curhour%10))
			}
		if(parseInt(curminutes/10)!=parseInt(nextminutes/10)){
			addballs(Marginleft+39*(Radius+1),Margintop,parseInt(curminutes/10))
			}
		if(parseInt(curminutes%10)!=parseInt(nextminutes%10)){
			addballs(Marginleft+54*(Radius+1),Margintop,parseInt(curminutes%10))
			}
		if(parseInt(curseconds/10)!=parseInt(nextseconds/10)){
			addballs(Marginleft+79*(Radius+1),Margintop,parseInt(curseconds/10))
			}
		if(parseInt(curseconds%10)!=parseInt(nextseconds%10)){
			addballs(Marginleft+95*(Radius+1),Margintop,parseInt(curseconds%10))
			}
		
		}
			????updateballs();
	}


	
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+j*2*(Radius+1)+(Radius+1),
				?y:y+i*2*(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))]
				?}
			?ball.push(aball);
			?}
	}
	
function?getCurrentShowTimeSeconds(){
	var?curtime=new?Date();
	var?ret=endtime.getTime()-curtime.getTime();
	ret=Math.round(ret/1000);
	return?ret>0?ret:0;
	}	
function?updateballs(){
	for(var?i=1;i<ball.length;i++){
		??ball.x+=ball.vx;
		??ball.y+=ball.vy;
		??ball.vy+=ball.g;
		??if(ball.y?>WINDOW_HEIGHT-(Radius*2)){
			??ball.y?=WINDOW_HEIGHT-(Radius*2);
			??ball.vy=-ball.vy*0.7;
			??}
			
			
		}
	}	

function?render(cxt){
????cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
	var?hour=parseInt(curshowtimeseconds/3600);
	var?minutes=parseInt((curshowtimeseconds-hour*3600)/60);
	var?seconds=parseInt(curshowtimeseconds%60);
	renderdigit(Marginleft,Margintop,parseInt(hour/10),cxt);
	renderdigit(Marginleft+15*(Radius+1),Margintop,parseInt(hour%10),cxt);
	renderdigit(Marginleft+30*(Radius+1),Margintop,10,cxt);
	renderdigit(Marginleft+39*(Radius+1),Margintop,parseInt(minutes/10),cxt);
	renderdigit(Marginleft+54*(Radius+1),Margintop,parseInt(minutes%10),cxt);
	renderdigit(Marginleft+69*(Radius+1),Margintop,10,cxt);
	renderdigit(Marginleft+79*(Radius+1),Margintop,parseInt(seconds/10),cxt);
	renderdigit(Marginleft+95*(Radius+1),Margintop,parseInt(seconds%10),cxt);
	
		for(var?i=1;i<ball.length;i++){

			cxt.fillStyle=ball[i].color;
			cxt.beginPath();
			?cxt.arc(ball[i].x,ball[i].y,Radius,0,2*Math.PI);
			?cxt.closePath();
			?cxt.fill();

		}
	}
	
function?renderdigit(x,y,num,cxt)
{
	cxt.fillStyle="rgb(0,102,153)";
	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();
			?}
	}