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() } }
找错误的时候真的是要爆炸了,老师能不能推荐一种好的工具?
25 26行
只是路过 不过你好牛啊 我还只是学生