下面是我的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();

            }

        }

    }

}