我覺得時鐘的話既然可以getHours得到小時、分鐘、秒，沒必要化成毫秒再轉換回去，所以改了下代碼，去掉了getCurrentShowTimeSeconds( )這個函數(shù)，代碼如下，小球的自由落體運動正確，但是產(chǎn)生落體小球的位置和頻次不對，時鐘走秒也不太對勁，誰幫我看下是哪里的問題？

/**
?*?Created?by?Administrator?on?2016/10/8?0008.
?*/
//定義兩個全局變量，就可以在onload函數(shù)中使用，這樣做的好處是屏布的大小改變起來非常方便；其次后續(xù)做屏幕自適應時只需要計算這兩個值就可以了
var?WINDOW_WIDTH?=?1024;
var?WINDOW_HEIGHT?=?768;
var?RADIUS?=?8;
var?MARGIN_TOP?=?60;??//每個數(shù)字上邊距
var?MARGIN_LEFT?=?30;??//第一個數(shù)字的左邊距
//const?聲明創(chuàng)建一個只讀的常量。這不意味著常量指向的值不可變，而是變量標識符的值只能賦值一次。
var?curShowTime?=?0;?????//當前時間
var?balls?=?[];?????//一旦有新的小球，添加到這里
var?colors?=?["#33E5B5","#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;
????curShowTime?=?new?Date();
????setInterval(
????????function(){
????????????render(context);
????????????update();
????????},50
????)
}
/**
?*?繪制下一個時間
?*/
function?update(){
????var?nextShowTime?=?new?Date();
????var?nextHours?=?nextShowTime.getHours();
????var?nextMinutes?=?nextShowTime.getMinutes();
????var?nextSeconds?=?nextShowTime.getMinutes();
????var?curHours?=?curShowTime.getHours();
????var?curMinutes?=?curShowTime.getMinutes();
????var?curSeconds?=?curShowTime.getSeconds();
????//一旦時間改變
????if(nextSeconds?!=?curSeconds){
????????if(parseInt(nextHours/10)?!=?parseInt(curHours/10)){????????//小時的十位數(shù)有變化
????????????addBalls(?MARGIN_LEFT?,?MARGIN_TOP?,?parseInt(nextHours/10)?);?????//產(chǎn)生小球，數(shù)字位置?及?本身
????????}
????????if(parseInt(nextHours%10)?!=?parseInt(curHours%10)){
????????????addBalls(?MARGIN_LEFT?+?15*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(nextHours/10)?);
????????}
????????if(parseInt(nextMinutes/10)?!=?parseInt(curMinutes/10)){
????????????addBalls(?MARGIN_LEFT?+?39*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(nextMinutes/10)?);
????????}
????????if(parseInt(nextMinutes%10)?!=?parseInt(curMinutes%10)){
????????????????addBalls(?MARGIN_LEFT?+?54*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(nextMinutes/10)?);
????????}
????????if(parseInt(nextSeconds/10)?!=?parseInt(curSeconds/10)){
????????????addBalls(?MARGIN_LEFT?+?78*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(nextSeconds/10)?);
????????}
????????if(parseInt(nextSeconds%10)?!=?parseInt(curSeconds%10)){
????????????addBalls(?MARGIN_LEFT?+?93*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(nextSeconds/10)?);
????????}
????????//更新時間
????????curShowTime?=?nextShowTime;
????}
????//對所有已經(jīng)產(chǎn)生的小球的運動變化進行更新
????updateBalls();
????console.log(balls.length);
}
/**
?*?更新小球的運動狀態(tài)
?*?遍歷balls數(shù)組里的小球，實現(xiàn)拋物線運動.
?*?以及性能優(yōu)化將運動到畫布外的小球刪除掉，只留下畫布內(nèi)的小球，節(jié)省內(nèi)存
?*/
function?updateBalls(){
????var?count?=?0;??????//記錄保留在畫布中小球的數(shù)量
????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.6;
????????}
????????if(?balls[i].x?+?RADIUS?>?0?&&?balls[i].x?-?RADIUS?<?WINDOW_WIDTH?){??????//這個序號為i的小球仍然在畫布中
????????????balls[count++]?=?balls[i];
????????}
????}
????while(balls.length?>?Math.min(count,300)){
????????balls.pop();
????}
}
/**
?*?產(chǎn)生將要自由落體的小球。和render()相似，在(x,y)的位置對num數(shù)字的點陣化的位置加上一個小球
?*?@param?x
?*?@param?y
?*?@param?num
?*/
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(),??????//1.5?加上0-1之間的隨機數(shù)，g不同，使每個小球略有不同
????????????????????vx:Math.pow(?-1?,?Math.ceil(Math.random()*1000)?)?*?4,
????????????????????vy:-5,
????????????????????color:colors[Math.floor(?Math.random()*colors.length?)]
????????????????}
????????????????//push()?方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。
????????????????balls.push(aBall);
????????????}
????????}
????}
}
/**
?*?繪制當前時間。render是在(x,y)的位置對num數(shù)字的點陣話化進行渲染，
?*?@param?cxt
?*/
function?render(cxt){
????//進行逐幀動畫，每一幀都要把改變的對象進行刷新
????cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);??????//clearRect()?方法清空給定矩形內(nèi)的指定像素。
????
????var?hours?=?curShowTime.getHours();
????var?minutes?=?curShowTime.getMinutes();
????var?seconds?=?curShowTime.getSeconds();
????//一個數(shù)字一個數(shù)字繪制,先繪制數(shù)字1
????renderDigit(?MARGIN_LEFT?,?MARGIN_TOP?,?parseInt(hours/10)?,?cxt);
????//數(shù)字是7*10的點陣
????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?);
????????cxt.closePath();
????????cxt.fill();
????}
}
/**
?*
?*?@param?x?位置坐標
?*?@param?y?位置坐標
?*?@param?num?數(shù)字
?*?@param?cxt
?*/
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();
????????????????//第（i，j）個小圓的圓心的位置：
????????????????//CenterX:?x?+?j*2(R+1)?+(R+1)
????????????????//CenterY:?y?+?i*2(R+1)?+(R+1)
????????????????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();
????????????}
????????}
????}
}