var?window_width=1024;
var?window_height=768;
var?radius=8;
var?margin_left=30;
var?margin_top=60;
const?endTime=new?Date(2015,6,23,20,0,0);
var?curShowTimeSeconds=0;
var?balls=[];
const?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?cueTime=?new?Date();
????var?ret=endTime.getTime()?-?cueTime.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?){
????????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(curHours/10));
????????}
????????if(parseInt(curMinutes%10)!=parseInt(nextMinutes%10)){
????????????addBalls(Margin_left+54*(radius+1),Margin_top,parseInt(curHours%10));
????????}
????????if(parseInt(curSeconds/10)!=parseInt(nextSeconds/10)){
????????????addBalls(Margin_left+69*(radius+1),Margin_top,parseInt(curHours/10));
????????}
????????if(parseInt(curSeconds%10)!=parseInt(nextSeconds%10))?{
????????????addBalls(Margin_left?+?93*(radius+1),?Margin_top,?parseInt(curHours?%?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].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?=?parseInt(curShowTimeSeconds?-?hours?*?3600?-?minutes?*?60);//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()
????????????????}


}

找錯誤的時候真的是要爆炸了，老師能不能推薦一種好的工具？