檢查好幾遍還不知道為什么不能自動刷新數(shù)字，只能手動刷新。

var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 768;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

const endTime = new Date(2015,6,8,21,47,52);

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 curTime = new Date();

? ? var ret = endTime.getTime() - curTime.getTime();

? ? ret = Math.round( ret/1000 )

? ? return ret >= 0 ? ret : 0;

}

function update(){

? ? var nextshowtimes=getCurrentShowTimeSeconds();

? ? var nexth=parseInt(nextshowtimes/3600);

? ? var nextm=parseInt((nextshowtimes - nexth*3600)/60)

? ? var nexts=nextshowtimes%60

? ? var curh=parseInt(curShowTimeSeconds/3600);

? ? var curm=parseInt((currentShowTimeSeconds - curh*3600)/60)

? ? var curs=curShowTimeSeconds%60

? ?if(nexts!=curs){

? ? ? ? if(parseInt(curh/10)!=parseInt(nexth/10)){

? ? ? ? ? ? ? ?addballs(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curh/10));?

? ? ? ? }?

? ? ? ? if(parseInt(curh%10)!=parseInt(nexth%10)){

? ? ? ? ? ? addballs(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curh/10));

? ? ? ? }

? ? ? ? if(parseInt(curm/10)!=parseInt(nextm/10)){

? ? ? ? ? ? addballs(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curm/10));

? ? ? ? }

? ? ? ? if(parseInt(curm%10)!=parseInt(nextm%10)){

? ? ? ? ? ? addballs(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curm%10));

? ? ? ? }

? ? ? ? if(parseInt(curs/10)!=parseInt(nexts/10)){

? ? ? ? ? ? addballs(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curs/10));

? ? ? ? }

? ? ? ? if(parseInt(curs%10)!=parseInt(nexts%10)){

? ? ? ? ? ? addballs(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nexts%10));?

? ? ? ? }

? ? ? ? curShowTimeSeconds=nextshowtimes;

? ? } ?

? ? 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 = 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()

? ? ? ? ? ? }

}