var?WINDOW_WIDTH?=?1000;
var?WINDOW_HEIGHT?=?500;
var?RADIUS?=?6;
var?MARGIN_TOP?=?60;
var?MARGIN_LEFT?=?130;

var?nowTime?=?new?Date();
var?curhours=?nowTime.getHours();
var?curminutes?=?nowTime.getMinutes();
var?curseconds?=?nowTime.getSeconds();

var?hours=curhours;
var?minutes=curminutes;
var?seconds=curseconds;

var?balls=[];
const?colors=["pink","blue","yellow","black","green","orange","#666666"];

window.onload?=?function(){

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

????canvas.width?=?WINDOW_WIDTH;
????canvas.height?=?WINDOW_HEIGHT;

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

function?update(){
????var?nextTime?=?new?Date();
????var?nexthours?=?nextTime.getHours();
????var?nextminutes?=?nextTime.getMinutes();
????var?nextseconds?=?nextTime.getSeconds();

????if(nexthours!=curhours){
????????hours=nexthours;
????????if(parseInt(nexthours/10)!=parseInt(curhours/10)){
????????addBalls(MARGIN_LEFT?,?MARGIN_TOP?,?parseInt(hours/10))}
????????if(parseInt(nexthours%10)!=parseInt(curhours%10)){
????????addBalls(MARGIN_LEFT?+?15*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(hours%10))}
????}
????if(nextminutes!=curminutes){
????????minutes=nextminutes;
????????if(parseInt(nextminutes/10)!=parseInt(curminutes/10)){
????????addBalls(MARGIN_LEFT?+?39*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(minutes/10))}
????????if(parseInt(nextminutes%10)!=parseInt(curminutes%10)){
????????addBalls(MARGIN_LEFT?+?54*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(minutes%10))}
????}
????if(nextseconds!=curseconds){
????????seconds=nextseconds;
????????if(parseInt(nextseconds/10)!=parseInt(curseconds/10)){
????????addBalls(MARGIN_LEFT?+?78*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(seconds/10))}
????????if(parseInt(nextseconds%10)!=parseInt(curseconds%10)){
????????addBalls(MARGIN_LEFT?+?93*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(seconds%10))}
????}

???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+j*2*(RADIUS+1)+(RADIUS+1)?,
????????????????????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);

????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?);
????????????????cxt.closePath();

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

我是按著老師的思路, 做了個大同小異的時鐘動畫, 加入小球效果之前都是好的, 后來按著4-3加入小球效果后就顯示不出來了QAQ 幫忙看看~