/** * Created by Administrator on 2016/5/25. */var WINDOW_WIDTH=1200;var WINDOW_HEIGHT=600;var RADIUS=8;var MARGIN_LEFT=30;var MARGIN_TOP=60;const endTime=new Date(2016,4,31,21,36,36);var curShowTimeSeconds=0;window.onload=function(){ var canvas=document.getElementById('canvas'); var context=canvas.getContext("2d"); canvas.width=WINDOW_WIDTH; canvas.height=WINDOW_HEIGHT; curShowTimeSeconds=getCurrentShowTimeSeconds(); //render(context); setInterval( function () { render(context); update(); } , 50 );};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){ curShowTimeSeconds=nextShowTimeSeconds; }}function getCurrentShowTimeSeconds() { var curTime=new Date(); var ret=endTime.getTime()-curTime.getTime(); ret=Math.round(ret/1000); return ret>=0?ret:0;}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(minutes%10),cxt);}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/150
提交
取消