//逻辑var WINDOW_WIDTH = 1024;var WINDOW_HEIGHT = 768;var RADIUS = 8; //半径var MARGIN_TOP = 60;var MARGIN_LEFT = 30;//一天24个小时,小时是两位数。100%24=5最多设置4天。//月份如果想是4月,就必须要传3月。const endTime=new Date(2017,2,13,20,47,52);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=endTime.getTime()-curTime.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(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(curSeconds%10)); } curShowTimeSeconds=nextShowTimeSeconds; } //对已经产生小球的变化进行更新。 updateBalls(); console.log(balls.length);}//对已经产生小球的变化进行更新。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; } } 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){//对于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,//-1的多少次方。乘以4得到-4或者4。 vy:-5, //随机索引方法。 color:colors[Math.floor(Math.random()*colors.length)] } balls.push(aBall);//把这些小球放入到balls这个数组中去。 }}//绘制时钟。绘制小球。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(); }}
目前暂无任何回答
- 0 回答
- 0 关注
- 1094 浏览
添加回答
举报
0/150
提交
取消