下面是我的js 代碼：

var WINDOW_WIDTH=1024;

var WINDOW_HEIGHT=768;

var RADIUS=8;

var MARGIN_TOP=60;

var MARGIN_LEFT=30;

const endTime= new Date(2017,2,10,18,10,50);

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 getCurrentShowTimeSeconds() {

? ? var curTime= new Date();

? ? var ret=endTime.getTime()-curTime.getTime();

? ? ret=Math.round(ret/1000);//獲得秒數差值

? ? return ret >= 0 ? ret : 0;

? ? // console.log(curTime.getTime());

}

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(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(minutes/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();

? ? ? ? ? ? ? ? // 圓心位置：

? ? ? ? ? ? ? ? // CenterX:x+j*2*(R+1)+(R+1)

? ? ? ? ? ? ? ? // CenterY:y+i*2*(R+1)+(R+1)

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

? ? ? ? ? ? }

? ? ? ? }

? ? }

}