var?WINDOW_WIDTH?=?1024;
var?WINDOW_HEIGHT?=?768;
var?RADIUS?=?8;
var?MARGIN_TOP?=?60;
var?MARGIN_LEFT?=?30;

const?endTime?=?new?Date(2016,7,10,23,30,30);
var?curShowTimeSeconds?=?0;

var?Balls?=?[];
var?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.width?=?WINDOW_WIDTH;
????canvas.height?=?WINDOW_HEIGHT;

????curShowTimeSeconds?=?getCurrentShowTimeSeconds()
????setInterval(
????????function(){
????????????render(context);
????????????update();
????????}
????????,
????????50
????????);
}

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;

????var?curHours?=?parseInt(?curShowTimeSeconds?/?3600);
????var?curMinutes?=?parseInt(?(curShowTimeSeconds?-?curHours?*?3600)/60);
????var?curSeconds?=?curShowTimeSeconds?%?60;

????if?(nextSeconds?!=?curSeconds)?{
????????//控制‘小時(shí)’的時(shí)間變換效果
????????if(parseInt(curHours/10)?!=?parseInt(nextHours/10)?){
????????????addBalls(MARGIN_LEFT?+?0,?MARGIN_TOP,?parseInt(curHours/10));
????????}
????????if(parseInt(curHours%10)?!=?parseInt(nextHours%10)?){
????????????addBalls(MARGIN_LEFT?+?15*(RADIUS+1),?MARGIN_TOP,?parseInt(curHours/10));
????????}

????????//控制‘分鐘’的時(shí)間變換效果
????????if(parseInt(curMinutes/10)?!=?parseInt(nextMinutes/10)?){
????????????addBalls(MARGIN_LEFT?+?0,?MARGIN_TOP,?parseInt(curMinutes/10));
????????}
????????if(parseInt(curMinutes%10)?!=?parseInt(nextMinutes%10)?){
????????????addBalls(MARGIN_LEFT?+?15*(RADIUS+1),?MARGIN_TOP,?parseInt(curMinutes/10));
????????}

????????//控制‘秒鐘’的時(shí)間變換效果
????????if(parseInt(curSeconds/10)?!=?parseInt(nextSeconds/10)?){
????????????addBalls(MARGIN_LEFT?+?0,?MARGIN_TOP,?parseInt(curSeconds/10));
????????}
????????if(parseInt(curSeconds%10)?!=?parseInt(nextSeconds%10)?){
????????????addBalls(MARGIN_LEFT?+?15*(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].lengt;?i++)
????????for?(var?j=0;?j<digit[num].lengt;?j++)?
????????????if(?digit[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)]
????????????????}
????????????????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,?true);
????????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)//定位圓在網(wǎng)格上的每個(gè)圓心位置
????????????????cxt.closePath()

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