var window_width=1300;

var window_heigth=768;

var radius=8;

var margin_top=60;

var margin_left=30;

var endTime=new Date(2017,10,17,16,30);

var timeSeconds=0;

var ball=[]

var ballColor=['#33b5e5','0099cc','aa66cc','9933cc','99cc00','669900','ffbb33','ff8800','ff4444','cc0000']

window.onload=function(){

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

canvas.width=window_width;

canvas.height=window_heigth;

if(canvas){

var ?context=canvas.getContext('2d');

}else{

alert('當前瀏覽器不支持canvas，請更換瀏覽器后重試')

}；

timeSeconds=getTimeSeconds()；

setInterval(function(){

render(context)

upDate()

},50)

}

function getTimeSeconds(){

var nowTime=new Date();

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

ret=Math.round(ret/1000)

return ret>=0?ret:0;

}

function upDate(){

var nextTimeSeconds=getTimeSeconds();

var nextHour=parseInt(nextTimeSeconds/3600);

var nextMinutes=parseInt((nextTimeSeconds-nextHour*3600)/60);

var nextSeconds=nextTimeSeconds%60;;

var nowHour=parseInt (timeSeconds/3600);

var nowMinutes=parseInt((timeSeconds-nowHour*3600)/60);

var nowSeconds=timeSeconds%60;

if(nextSeconds!=nowSeconds){

if(parseInt(nowHour/10)!=parseInt(nextHour/10)){

addBall(margin_left+0,margin_top,parseInt(nowHour/10));

}

if(parseInt(nowHour%10)!=parseInt(nextHour%10)){

addBall(margin_left+15*(radius+1),margin_top,parseInt(nowHour%10));

}

if(parseInt(nowMinutes/10)!=parseInt(nextMinutes/10)){

addBall(margin_left+39*(radius+1),margin_top,parseInt(nowMinutes/10));

}

if(parseInt(nowMinutes%10)!=parseInt(nextMinutes%10)){

addBall(margin_left+54*(radius+1),margin_top,parseInt(nowMinutes%10));

}

if(parseInt(nowSeconds/10)!=parseInt(nextSeconds/10)){

addBall(margin_left+78*(radius+1),margin_top,parseInt(nowSeconds/10));

}

if(parseInt(nowSeconds%10)!=parseInt(nextSeconds%10)){

addBall(margin_left+93*(radius+1),margin_top,parseInt(nowSeconds%10));

}

timeSeconds=nextTimeSeconds

}

upDateBall()

}

function upDateBall(){

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

ball[i].x+=ball[i].vx;

ball[i].y+=ball[i].vy;

ball[i].vy+=ball[i].g;

if(ball[i].y>=window_heigth-radius){

ball[i].y=window_heigth-radius;

ball[i].vy=-ball[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 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:ballColor[Math.floor(Math.random()*ballColor.length)]

}

ball.push(aBall);

}

}

}

}

function render(cxt){

cxt.clearRect(0,0,window_width,window_heigth)

var hour=parseInt(timeSeconds/3600);//用總秒數除3600算出小時數

var minutes=parseInt((timeSeconds-hour*3600)/60);//用總秒數減去hour所占的秒數，并用余下的秒數除60得到分鐘數

var seconds=timeSeconds%60;//計算總秒數除60后的余數

renderDigit(margin_left,margin_top,parseInt(hour/10),cxt);

renderDigit(margin_left+15*(radius+1),margin_top,parseInt(hour%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<ball.length;i++){

cxt.fillStyle=ball[i].color;

cxt.beginPath();

cxt.arc(ball[i].x,ball[i].y,radius,0,2*Math.PI,false);

cxt.closePath();

cxt.fill()

}

}

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

cxt.fillStyle='aqua'

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();

}

}

}

}