改成了像電子鐘那樣的數(shù)字體 倒計時可以允許的小時數(shù)也改成了四位數(shù)

var WINDOW_WIDTH = 1366;
var WINDOW_HEIGHT = 600;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

const endTime = new Date("2016/11/6,18:47:00");
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()
? ?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 ){

? ? ? ?curShowTimeSeconds = nextShowTimeSeconds;
? ?}
}

function render( ctx ){

? ?ctx.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/1000) , ctx );
? renderDigit( MARGIN_LEFT + 140, MARGIN_TOP , parseInt((hours%1000)/100) , ctx );
? renderDigit( MARGIN_LEFT + 280, MARGIN_TOP , parseInt(((hours%1000)%100)/10) , ctx );
? ?renderDigit( MARGIN_LEFT + 429, MARGIN_TOP , parseInt(((hours%1000)%100)%10) , ctx );
? ?renderDigit( MARGIN_LEFT + 572, MARGIN_TOP , 10 , ctx );
? ?renderDigit( MARGIN_LEFT + 654, MARGIN_TOP , parseInt(minutes/10) , ctx);
? ?renderDigit( MARGIN_LEFT + 798, MARGIN_TOP , parseInt(minutes%10) , ctx);
? ?renderDigit( MARGIN_LEFT + 941, MARGIN_TOP , 10 , ctx);
? ?renderDigit( MARGIN_LEFT + 1024, MARGIN_TOP , parseInt(seconds/10) , ctx);
? ?renderDigit( MARGIN_LEFT + 1170, MARGIN_TOP , parseInt(seconds%10) , ctx);
}

function renderDigit( x , y , num , ctx ){

? ?ctx.strokeStyle = "#FFFFFF";

? ?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 ){
? ? ? ? ? ? ? ?ctx.beginPath();
? ? ? ? ? ?ctx.moveTo(0,20);
? ? ? ? ? ?ctx.lineTo(20,10);
? ? ? ? ? ?ctx.lineWidth = 2
? ? ? ? ? ?ctx.stroke();
? ? ? ? ? ?ctx.closePath();
? ? ? ? }
? ? ? ? ? ?if( digit[num][i][j] == 2 ){
? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? ctx.moveTo(20,0);
? ? ? ? ? ? ctx.lineTo(10,20);
? ? ? ? ? ? ctx.lineWidth = 2
? ? ? ? ? ? ctx.stroke();
? ? ? ? ? ? ctx.closePath();
? ? ? ? }
}