var?WINDOW_WIDTH?=?1024;
var?WINDOW_HEIGHT?=?768;
var?RADIUS?=?8;
var?MARGIN_TOP?=?60;
var?MARGIN_LEFT?=?30;

const?endTime?=?new?Date(2019,3,31,12,0,0);
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?)
}

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=parseInt(nextShowTimeSeconds%60);

????var?curhours?=?parseInt(?curShowTimeSeconds?/?3600);
????var?curminutes?=?parseInt(?(curShowTimeSeconds?-?hours?*?3600)/60?)
????var?curseconds?=?parseInt(curShowTimeSeconds?%?60);

????if(nextSeconds!=curseconds)
????{
????????curShowTimeSeconds=nextShowTimeSeconds;
????}

}

function?render(?cxt?){

????cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//clearRect刷新函數

????var?hours?=?parseInt(?curShowTimeSeconds?/?3600);
????var?minutes?=?parseInt(?(curShowTimeSeconds?-?hours?*?3600)/60?)
????var?seconds?=?parseInt(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);
}

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()
????????????}


????????}
}

瀏覽器顯示這個

can?not?read?type?of?undefine