var?RADIUS?=?10; var?TOP?=?60; var?LEFT?=?30; const?endTime?=?new?Date(2016,6,27,22,0,0); var?WIDTH?=?1324; var?HEIGHT?=?786; var?dur?=?0; window.onload?=?function(){ var?oC?=?document.getElementById("canvas"); var?oContext?=?oC.getContext("2d"); oC.width?=?WIDTH; oC.height?=?HEIGHT; dur?=?getDuration(); ?setInterval(function(){ ????????????render(?oContext?); ????????????update(); ????????}?,?50 ????); } function?getDuration(){ var?curTime?=?new?Date(); ????var?ret?=?endTime.getTime()?-?curTime.getTime(); ????ret?=?Math.round(?ret/1000?); ????return?ret?>=?0???ret?:?0; } function?update(){ var?nextTimeDur?=?getDuration(); var?nextHours?=?parseInt(?nextTimeDur?/?3600); ????var?nextMinutes?=?parseInt(?(nextTimeDur?-?nextHours?*?3600)/60?); ????var?nextSeconds?=?nextTimeDur?%?60; ????var?curHours?=?parseInt(?dur?/?3600); ????var?curMinutes?=?parseInt(?(dur?-?curHours?*?3600)/60?); ????var?curSeconds?=?dur?%?60; ????if(?nextSeconds?!=?curSeconds?){ ????????dur?=?nextTimeDur; ????} //end?=?new?Date().getTime(); } function?render(oContext){ //start?=?new?Date().getTime(); oContext.clearRect(0,0,WIDTH,HEIGHT); var?hour?=?parseInt(dur/3600); var?min?=?parseInt((dur-hour*3600)/60); var?sec?=?parseInt(dur%60); draw(TOP,?LEFT,?oContext,?parseInt(hour/10)); draw(TOP+15*(RADIUS+1),?LEFT,?oContext,?parseInt(hour%10)); draw(TOP+30*(RADIUS+1),?LEFT,?oContext,?10); draw(TOP+39*(RADIUS+1),?LEFT,?oContext,?parseInt(min/10)); draw(TOP+54*(RADIUS+1),?LEFT,?oContext,?parseInt(min%10)); draw(TOP+69*(RADIUS+1),?LEFT,?oContext,?10); draw(TOP+78*(RADIUS+1),?LEFT,?oContext,?parseInt(sec/10)); draw(TOP+93*(RADIUS+1),?LEFT,?oContext,?parseInt(sec/10)); } function?draw(TOP,?LEFT,?oContext,?num){ oContext.fillStyle?=?"blue"; 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){ oContext.beginPath(); oContext.arc(TOP+RADIUS+1+j*2*(RADIUS+1),?LEFT+RADIUS+1+i*2*(RADIUS+1),?RADIUS,?0,?2*Math.PI); oContext.closePath(); oContext.fill(); } } } }