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

//var?endTime?=?new?Date();
//endTime.setTime(?endTime.getTime()?+?3600*1000?)
var?curShowTimeSeconds?=?0

var?balls?=?[];
const?colors?=?["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]

window.onload?=?function(){

????WINDOW_WIDTH?=?document.body.clientWidth
????WINDOW_HEIGHT?=?document.body.clientHeight

????MARGIN_LEFT?=?Math.round(WINDOW_WIDTH?/10);
????RADIUS?=?Math.round(WINDOW_WIDTH?*?4?/?5?/?108)-1

????MARGIN_TOP?=?Math.round(WINDOW_HEIGHT?/5);

????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?=?curTime.getHours()?*?3600?+?curTime.getMinutes()?*?60?+?curTime.getSeconds();

????return?ret;
}

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?){
????????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)?);
????????}

????????if(?parseInt(curMinutes/10)?!=?parseInt(nextMinutes/10)?){
????????????addBalls(?MARGIN_LEFT?+?39*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(curMinutes/10)?);
????????}
????????if(?parseInt(curMinutes%10)?!=?parseInt(nextMinutes%10)?){
????????????addBalls(?MARGIN_LEFT?+?54*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(curMinutes%10)?);
????????}

????????if(?parseInt(curSeconds/10)?!=?parseInt(nextSeconds/10)?){
????????????addBalls(?MARGIN_LEFT?+?78*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(curSeconds/10)?);
????????}
????????if(?parseInt(curSeconds%10)?!=?parseInt(nextSeconds%10)?){
????????????addBalls(?MARGIN_LEFT?+?93*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(nextSeconds%10)?);
????????}

????????curShowTimeSeconds?=?nextShowTimeSeconds;
????}

????updateBalls();

????console.log(?balls.length)
}

function?updateBalls(){

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

????????balls[i].x?+=?balls[i].vx;

????var?c?=?1.0;
????if(?balls[i].y?+?RADIUS?+?balls[i].vy?>=?WINDOW_HEIGHT?){
????????c?=?(?WINDOW_HEIGHT?-?(balls[i].y+?RADIUS)?)?/?balls[i].vy;
????????console.log(?c?);???
????}
????????
????balls[i].y?+=?balls[i].vy;
????balls[i].vy?+=?c?*?balls[i].g;;

????????if(?balls[i].y?>=?WINDOW_HEIGHT-RADIUS?){
????????????balls[i].y?=?WINDOW_HEIGHT-RADIUS;
????????balls[i].vy?=?-?Math.abs(balls[i].vy)*0.75;
????????}
????}

????var?cnt?=?0
????for(?var?i?=?0?;?i?<?balls.length?;?i?++?)
????????if(?balls[i].x?+?RADIUS?>?0?&&?balls[i].x?-RADIUS?<?WINDOW_WIDTH?)
????????????balls[cnt++]?=?balls[i]

????while(?balls.length?>?cnt?){
????????balls.pop();
????}
}

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?)?]
????????????????}

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

????????????????cxt.fill()
????????????}
}
代碼何老師的一樣，但是顯示效果不一樣，就是我的顯示效果中動態(tài)的小球和時鐘在同一水平線顯示了，而不是和老師的一樣在時鐘下邊顯示