/**
* Created by Administrator on 2015-03-18.
*/
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARIN_TOP = 60;
var MARGIN_LEFT = 30;

//Date傳值時注意，傳入月份時要比實際傳入的大一月份，eg:實際傳入6月時，應傳入5月
const endTime = new Date(2015,2,20,18,47,52);
var curShowTimeSeconds = 0;

//頁面加載完后執行
window.onload = function(){

? ?var canvas_t = document.getElementById("canvas");
? ?var context_t = canvas_t.getContext("2d");

? ?canvas_t.width = WINDOW_WIDTH;
? ?canvas_t.height = WINDOW_HEIGHT;
? ?curShowTimeSeconds = getCurrentShowTimeSeconds();
? ?//render(context_t);
? ?setInterval(
? ? ? ?function(){
? ? ? ? ? ?render(context_t);
? ? ? ? ? ?update();
? ? ? ?}
? ? ? ?,50
? ?);
}

/*獲取時間差（單位：秒）*/
function getCurrentShowTimeSeconds(){
? ?var curTime = new Date();
? ?//獲取當前時間距離截止時間的時間差（單位：毫秒）
? ?//getTime(),返回距 1970 年 1 月 1 日之間的毫秒數
? ?var ret = endTime.getTime() - curTime.getTime();
? ?//Math.round(),把一個數字舍入為最接近的整數
? ?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;

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

/*顯示時間*/
function render(cxt){

? ?//clearRect() 方法清空給定矩形內的指定像素
? ?cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
? ?var hours = parseInt(curShowTimeSeconds / 3600);
? ?var minute = parseInt(curShowTimeSeconds - hours*3600) / 60;
? ?var seconds = curShowTimeSeconds % 60;

? ?/*最終顯示為 ?12：34：56*/
? ?//顯示時鐘
? ?renderDigit(MARGIN_LEFT,MARIN_TOP,parseInt(hours/10),cxt);
? ?renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARIN_TOP,parseInt(hours%10),cxt);
? ?//顯示冒號：“：”
? ?renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARIN_TOP,10,cxt);
? ?//顯示分鐘
? ?renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARIN_TOP,parseInt(minute/10),cxt);
? ?renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARIN_TOP,parseInt(minute%10),cxt);
? ?//顯示冒號：“：”
? ?renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARIN_TOP,10,cxt);
? ?//顯示秒鐘
? ?renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARIN_TOP,parseInt(seconds/10),cxt);
? ?renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARIN_TOP,parseInt(seconds%10),cxt);
}

//參數含義：1.數字距離左側的距離。2.數字距離上邊的距離。3.要顯示的數字。4.顯示數字
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();
? ? ? ? ? ?}
}