var r=8;

var marginTop=60;

var marginLeft=30;

const endTime=new Date(2016,8,10,15,10,30);  //const定义常量，注意：月份是从零开始的，倒计时时间不能超过24小时

var curShowTimeSeconds=0;

window.onload=function(){

var can=document.getElementById("can");

can.width=1024;

can.height=768;

var ctx=can.getContext("2d");

curShowTimeSeconds=getCurrentShowTimeSeconds();

setInterval(

function(){

render(ctx);

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

//console.log(curSeconds+"和"+nextSeconds);   //这里打印出的curSeconds和nextSeconds是一样的，不就说明curShowTimeSeconds和nextShowTimeSeconds是一样的么？

if(nextSeconds = curSeconds){

curShowTimeSeconds=nextShowTimeSeconds;

}

}

function render(content){

content.clearRect(0,0,3000,3000); //防止重复绘制;

var hours=parseInt(curShowTimeSeconds/3600);

var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);

var seconds=curShowTimeSeconds%60;

renderDigit(marginLeft,marginTop,parseInt(hours/10),content);

renderDigit(marginLeft+15*(r+1),marginTop,parseInt(hours%10),content);

renderDigit(marginLeft+30*(r+1),marginTop,10,content);

renderDigit(marginLeft+39*(r+1),marginTop,parseInt(minutes/10),content);

renderDigit(marginLeft+54*(r+1),marginTop,parseInt(minutes%10),content);

renderDigit(marginLeft+69*(r+1),marginTop,10,content);

renderDigit(marginLeft+78*(r+1),marginTop,parseInt(seconds/10),content);

renderDigit(marginLeft+93*(r+1),marginTop,parseInt(seconds%10),content);

}

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

content.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){

content.beginPath();

content.arc(x+2*j*(r+1)+(r+1) , y+2*i*(r+1)+(r+1) , r , 0 , 2*Math.PI);

content.closePath();

content.fill();

}

}