var WINDOW_WIDTH= 1024;var WINDOW_HEIGHT=768;var RADIUS=8;var MARGIN_TOP = 60;var MARGIN_LEFT = 30;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;?? ? setInterval(? ? ? ? function(){? ? ? ? ? ? render( context );? ? ? ? ? ? update();? ? ? ? }? ? ? ? ,? ? ? ? 50? ? );}function update(){? ?var freshtime = new Date();? ?var freshseconds = freshtime.getSeconds();? ?var freshhours =freshtime.getHours();? ?var freshminutes =freshtime.getMinutes();? ?if (seconds!=freshseconds) {? ? ? ??? ? ? ? if(parseInt(hours/10)!=parseInt(freshhours/10)){? ? ? ? addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10));? ? ? ? }? ? ? ? if( parseInt(hours%10) != parseInt(freshhours%10)){? ? ? ? ? ? addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours/10) );? ? ? ? }? ? ? ? if( parseInt(minutes/10) != parseInt(freshminutes/10) ){? ? ? ? ? ? addBalls( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) );? ? ? ? }? ? ? ? if( parseInt(minutes%10) != parseInt(freshminutes%10) ){? ? ? ? ? ? addBalls( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) );? ? ? ? }?? ? ? ? if( parseInt(seconds/10) != parseInt(freshseconds/10) ){? ? ? ? ? ? addBalls( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) );? ? ? ? }? ? ? ? if( parseInt(seconds%10) != parseInt(freshseconds%10) ){? ? ? ? ? ? addBalls( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) );? ? ? ? }? ? ? ? seconds=freshseconds;? ?}? ?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 nowtime = new Date(); var hours =nowtime.getHours(); var minutes =nowtime.getMinutes(); var seconds = nowtime.getSeconds(); renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10), cxt )? ? 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,113)"; 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,y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI) cxt.closePath() cxt.fill() }}