var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 768;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

//endTime为截止的时间；小时为两位数，所以最多就倒计时四天，（从现在到截止时间为止）；月份要+1,5是代表6月份；

//从现在到2015年6月15日倒计时

const endTime=new Date(2015,5,15,18,47,52);

var  curShowTimeSeconds=0;

window.onload = function(){

    var canvas = document.getElementById('canvas');

    var context = canvas.getContext("2d");

//计算现在的时间

    curShowTimeSeconds=GetCurrentShowTimeSeconds();

    canvas.width = WINDOW_WIDTH;

    canvas.height = WINDOW_HEIGHT;

    setInterval(

//匿名函数。每帧的执行内容

   function()

{

render(context);

update();

},

//时间，单位：毫秒；50表示每隔多少毫秒执行一帧

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-hours*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;

//数字是7*10的矩阵，冒号是4*10的矩阵

    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 GetCurrentShowTimeSeconds()

{

var curTime=new Date();

//截止的时间距现在的秒数

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

//把ret转化为毫秒数，现在距设定的endTime的的时间

ret=Math.round(ret/1000);

return ret>0?ret:0;

}

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

            }

}