????const?WINDOW_WIDTH?=?1100;??
????const?WINDOW_HEIGHT?=?900;?????
????const?RADIUS?=?6;
????const?TOP?=?60;
????const?LEFT?=?60;
????var?endTime?=?new?Date(2015,8,22,0,0,0);
????var?cutTimeSeconds?=?0;
????var?balls?=?[];
????var?colors?=?["#33b5e5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ff8800","#ff4444","#cc0000","ffbb33"];

????/****************************************************************************************************window.onload*/
????window.onload?=?function(){
????????
????????var?canvas?=?document.getElementById('canvas');????????????????

????????var?context?=?canvas.getContext('2d');????????????????????????????????
????????????
????????canvas.width?=?WINDOW_WIDTH;????????????
????????canvas.height?=?WINDOW_HEIGHT;??????????
????????cutTimeSeconds?=?getCutTimeSeconds();
????????setInterval(function(){?render(context);?update();},?1000/60);????????????????????????????????????????????????????????????
????};
????/****************************************************************************************************getCutTimeSeconds()*/
????function?getCutTimeSeconds(){
????????var?nowTime?=?new?Date();
????????var?ret?=?endTime.getTime()?-?nowTime.getTime();
????????ret?=?Math.round(ret/1000);
????????return?ret?>=?0???ret?:?0;
????};

????/**************************************************************************************************************update()*/
????function?update(){
????????
????????var?nextTimeSeconds?=?getCutTimeSeconds();
????????????????//????????下一秒需要變化的時間
????????
????????var?nextHours?=?parseInt(nextTimeSeconds?/?3600);????
????????var?nextMinutes?=?parseInt((nextTimeSeconds?-?nextHours*3600)?/?60);????????
????????var?nextSeconds?=?parseInt(nextTimeSeconds%60);????????????????????????????????????????????????????????????????????

????????var?cutHours?=?parseInt(cutTimeSeconds?/?3600);????????
????????var?cutMinutes?=?parseInt((cutTimeSeconds?-?cutHours*3600)?/?60);????????
????????var?cutSeconds?=?parseInt(cutTimeSeconds%60);????

????????if?(nextSeconds?!=?cutSeconds)
????????{

????????????if?(parseInt(cutHours/10)?!=?parseInt(nextHours/10))?
????????????{
????????????????addBall(LEFT?,?TOP?,?parseInt(cutHours/10));
????????????};

????????????if?(parseInt(cutHours%10)?!=?parseInt(nextHours%10))?
????????????{
????????????????addBall(LEFT+15*(RADIUS+1)?,?TOP?,?parseInt(cutHours%10));
????????????};



????????????if?(parseInt(cutMinutes/10)?!=?parseInt(nextMinutes/10))?
????????????{
????????????????addBall(LEFT+40*(RADIUS+1)?,?TOP?,?parseInt(cutMinutes/10));
????????????};

????????????if?(parseInt(cutMinutes%10)?!=?parseInt(nextMinutes%10))?
????????????{
????????????????addBall(LEFT+55*(RADIUS+1)?,?TOP?,?parseInt(cutMinutes%10));
????????????};



????????????if?(parseInt(cutSeconds/10)?!=?parseInt(nextSeconds/10))?
????????????{
????????????????addBall(LEFT+80*(RADIUS+1)?,?TOP?,?parseInt(cutSeconds/10));
????????????};
????????????if?(parseInt(cutSeconds%10)?!=?parseInt(nextSeconds%10))?
????????????{
????????????????addBall(LEFT+95*(RADIUS+1)?,?TOP?,?parseInt(cutSeconds%10));
????????????};


????????????cutTimeSeconds?=?nextTimeSeconds;
????????}
????????updateBalls();
????}
????/*********************************************************************************************************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].a;

????????????if?(balls[i].y?>=?WINDOW_HEIGHT?-?RADIUS)?
????????????????//????判斷底部邊緣的碰撞事件
????????????{
????????????????balls[i].y?=?WINDOW_HEIGHT?-?RADIUS;
????????????????balls[i].vy?=?-balls[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?ball?=?{

????????????????????????x:x+(RADIUS+1)+j*2*(RADIUS+1),

????????????????????????y:y+(RADIUS+1)+i*2*(RADIUS+1),

????????????????????????a:2+Math.random(),

????????????????????????vx:Math.pow(-1,Math.random()*10)*4,

????????????????????????vy:-5+Math.random(),

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

????????????????????}

????????????????????balls.push(ball);//????將小球放入數(shù)組balls中
????????????????}
????????????????
????????????}
????????}
????}


????
????function?render(cxt){????
????????
?????????cxt.clearRect(0?,?0?,?canvas.width?,?canvas.height??);
????????????????//????????每次調(diào)用時，清除canvas畫布
????????????????
????????var?hours?=?parseInt(cutTimeSeconds?/?3600);???
????????var?minutes?=?parseInt((cutTimeSeconds?-?hours*3600)?/?60);???????????????????????????????
????????var?seconds?=?parseInt(cutTimeSeconds%60);????
????????renderDigit(LEFT?,?TOP?,?parseInt(hours/10)?,?cxt);??
????????renderDigit(LEFT+15*(RADIUS+1)?,?TOP?,?parseInt(hours%10)?,?cxt);?

????????renderDigit(LEFT+30*(RADIUS+1)?,?TOP?,?10?,?cxt);???

????????renderDigit(LEFT+40*(RADIUS+1)?,?TOP?,?parseInt(minutes/10)?,?cxt);?
????????renderDigit(LEFT+55*(RADIUS+1)?,?TOP?,?parseInt(minutes%10)?,?cxt);?

????????renderDigit(LEFT+70*(RADIUS+1)?,?TOP?,?10?,?cxt);????????????????????????????????
????????????????//????????繪制時鐘冒號

????????renderDigit(LEFT+80*(RADIUS+1)?,?TOP?,?parseInt(seconds/10)?,?cxt);??
????????renderDigit(LEFT+95*(RADIUS+1)?,?TOP?,?parseInt(seconds%10)?,?cxt);

????????for?(var?i?=?0;?i?<?balls.length;?i++)?{
????????????cxt.fillStyle?=?balls[i].ballColor;
????????????cxt.beginPath();
????????????cxt.arc(balls[i].x?,balls[i].y?,?RADIUS?,?0?,2*Math.PI);
????????????cxt.closePath();
????????};
????};

????/********************************************************************************************renderDigit(x?,?y?,?num?,?cxt)*/
????function?renderDigit(x?,?y?,?num?,?cxt){????????????????????????????????????????????
????????????????//????????該函數(shù)用于繪制數(shù)字

????????cxt.fillStyle?=?'rgb(0?,?102?,?153)';????????????????????????????????????????????????
????????????????//?????????設(shè)置繪圖顏色
????????for?(var?n?=?0?;?n<digit[num].length?;?n++?)????????????????????????
????????????????//????????遍歷digit[num]數(shù)組；n：行
????????{
????????????for?(var?m?=?0?;?m<digit[num][n].length?;?m++?)????????????????
????????????????????//????????再遍歷digit[num][n]數(shù)組；m：列
????????????{
????????????????if?(digit[num][n][m]?==?1)???????????????????????????????
????????????????{????
????????????????????cxt.beginPath();

????????????????????cxt.arc(x+(RADIUS+1)+m*2*(RADIUS+1)?,?y+(RADIUS+1)+n*2*(RADIUS+1)?,?RADIUS?,?0?,?2*Math.PI);????????????????????????????????????????????
??????????????????????
????????????????????cxt.closePath();

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