/** * Created by Administrator on 2015/11/7. *///倒计时时钟的实现var WINDOW_WIDTH=1024;var WINDOW_HEIGTH=768;var RADIUS=7;var MARGIN_TOP=60;var MARGIN_LEFT=30;var ENDTIME=new Date(2015,10,11,21,30,59);//返回指定时间据公元的毫秒,月数从0开始，10表示11月份var curShowTimeSeconds=0;var ball=[];var 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_HEIGTH; curShowTimeSeconds=getSeconds(); setInterval( function(){ update(context);//更新显示时间 render(context); }, 50 )}function getSeconds(){ var now_time=new Date();//获取当前时间 var cur_time=now_time.getTime(); var end_time=ENDTIME.getTime(); var seconds=(end_time-cur_time)/1000; return seconds >=0 ? seconds:0;}function update(ctx){ var nextShowTimeSeconds = getSeconds(); //下一个时间的 var nextHours = parseInt( nextShowTimeSeconds / 3600); var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 ); var nextSeconds = nextShowTimeSeconds % 60; var curHours = parseInt( curShowTimeSeconds / 3600); if(curHours/10!=nextHours/10){ addBall(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10)); } if(curHours%10!=nextHours%10){ addBall(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10)); } var curMinutes = parseInt( (curShowTimeSeconds - curHours * 3600)/60 ); if(curMinutes/10!=nextMinutes/10){ addBall(MARGIN_LEFT+45*(RADIUS+1),MARGIN_TOP,curMinutes/10); } if(curMinutes%10!=nextMinutes%10){ addBall(MARGIN_LEFT+60*(RADIUS+1),MARGIN_TOP,curMinutes%10); } var curSeconds = curShowTimeSeconds % 60; if(curSeconds/10!=nextSeconds/10){ addBall(MARGIN_LEFT+90*(RADIUS+1),MARGIN_TOP,curSeconds/10); } if(curSeconds%10!=nextSeconds%10){ addBall(MARGIN_LEFT+105*(RADIUS+1),MARGIN_TOP,curSeconds%10); } if( nextSeconds != curSeconds ) { curShowTimeSeconds = nextShowTimeSeconds; } updateBall();}function addBall( x , y , num ){ var num=digit[Math.floor(num)]; var digit_len=num.length; for( var i = 0 ; i < digit_len ; i ++ ) for( var j = 0 ; j <num[i].length ; j ++ ) if( 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 ) ] }; console.log("push ball"); ball.push( aBall ); }}function updateBall(){ for(var i=0;i<ball.length;i++){ ball[i].x=ball[i].x+ball[i].vx; ball[i].y=ball.y+ball[i].vy; if(ball[i].y>=WINDOW_HEIGTH){ ball[i].y=WINDOW_HEIGTH-RADIUS; ball[i].vy=-ball[i].vy*0.75; } ball[i].vy=ball[i].vy+ball[i].g; }}function render(ctx){ var hours = parseInt( curShowTimeSeconds / 3600); var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 ); var seconds = curShowTimeSeconds % 60; ctx.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGTH);//清屏 renderdigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),ctx); renderdigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),ctx); renderdigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx); renderdigit(MARGIN_LEFT+45*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx); renderdigit(MARGIN_LEFT+60*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx); renderdigit(MARGIN_LEFT+75*(RADIUS+1),MARGIN_TOP,10,ctx); renderdigit(MARGIN_LEFT+90*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx); renderdigit(MARGIN_LEFT+105*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx); for( var i = 0 ; i < ball.length ; i ++ ){ console.log(ball[i].color); ctx.beginPath(); ctx.arc( ball[i].x , ball[i].y , RADIUS , 0 , 2*Math.PI , true ); ctx.fillStyle=ball[i].color; ctx.closePath(); ctx.fill(); }}function renderdigit(top,left,num,ctx){ var num=digit[num]; var digit_len=num.length; var digit_0=num[0]; for(var i=0;i<digit_len;i++){ for(var j=0;j<num[i].length;j++){ if(num[i][j]==1){ ctx.beginPath(); ctx.fillStyle="#50cfc3"; ctx.arc(top+j*2*(RADIUS+1)+(RADIUS+1),left+i*2*RADIUS+(RADIUS+1),RADIUS,0,2*Math.PI,false); ctx.closePath(); ctx.fill(); } } }}
添加回答
举报
0/150
提交
取消