var WINDOW_WIDTH = 1044;//定義窗口寬高
var WINDOW_HEIGHT = 768;
var RADIUS = 8;//小球的半徑
var MARGIN_TOP =60; ? ? ? ? ? ? ? ? ?//小球距離上邊距距離
var MARGIN_LEFT =30; //小球距離左邊距距離

const endTime = new Date(2015,9,23,20,19,55);//全局變量時間，倒計時
var curShowTimeSeconds = 0;//定義當前顯示時間變量

var balls =[]//掉落小球的數(shù)組；
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
window.onload = function(){
? ?var canvas = document.getElementById("canvas");
? ?var ?context = canvas.getContext("2d");
? ?canvas.width = WINDOW_WIDTH;
? ?canvas.height = WINDOW_HEIGHT;//將寬高賦給畫布
? ?//alert(canvas)
? ?curShowTimeSeconds = getCurrentShowTimeSeconds()
? setInterval(function(){
? ? ? render(context);//繪制函數(shù)
? ? ? update();
? },50);
}


function getCurrentShowTimeSeconds(){
? ?var curTime =new Date();//獲取當前系統(tǒng)時間
? ?var ret = endTime.getTime() - curTime.getTime();//獲取結(jié)束時間
? ?ret = Math.round(ret/1000)//轉(zhuǎn)換成一個整數(shù)

? ?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 = curShowTimeSeconds % 60;
? ?if(nextSeconds != curSeconds){

? ? ? ?if(parseInt(curHours/10) != parseInt(nextHours/10)){
? ? ? ? ? ?addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));
? ? ? ?}
? ? ? ?if(parseInt(curHours%10) != parseInt(nextHours%10)){
? ? ? ? ? ?addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours/10));
? ? ? ?}
? ? ? ?if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){
? ? ? ? ? ?addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
? ? ? ?}
? ? ? ?if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){
? ? ? ? ? ?addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));

? ? ? ?}
? ? ? ?if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){
? ? ? ? ? ?addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
? ? ? ?}
? ? ? ?if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){
? ? ? ? ? ?addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nextSeconds%10));

? ? ? ?}


? ? ? ?curShowTimeSeconds = nextShowTimeSeconds;
? ?}
? ?updateBalls();
? ?
?
}
//更新掉落小球
function updateBalls(){
? ?for(var i = 0;i<balls.length;i++){
? ? ? ?balls[i].x +=balls[i].vx;
? ? ? ?balls[i].y +=balls[i].vy;
? ? ? ?balls[i].vy += balls[i].g
? ? ? ?if(balls[i].y >=WINDOW_HEIGHT-RADIUS){
? ? ? ? ? ?balls[i].y =WINDOW_HEIGHT-RADIUS;
? ? ? ? ? ?balls[i].vy = -balls[i].vy*0.75;
? ? ? ?}
? ?}

}
function addBalls( x , y , num ){
? //alert("11")
? ?for(var i=0;i<digit[num].length;i++)//代表一個數(shù)字的列數(shù)
? ? ? ?for(var j=0;j<digit[num][i].length;j++)//代表一個數(shù)字的行數(shù)
? ? ? ? ? ?if(digit[num][i][j]==1){
? ? ? ? ? ? ? ?var aBall = {
? ? ? ? ? ? ? ? ? ?x:x+j*2*(RADIUS+1)+(RADIUS+1),
? ? ? ? ? ? ? ? ? ?x:y+i*2*(RADIUS+1)+(RADIUS+1),
? ? ? ? ? ? ? ? ? ?g:1.5+Math.random(),
? ? ? ? ? ? ? ? ? ?vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,
? ? ? ? ? ? ? ? ? ?vy:-5,
? ? ? ? ? ? ? ? ? ?color: colors[ Math.floor( Math.random()*colors.length ) ]

? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?//alert(colors.length)
? ? ? ? ? ? ? ?balls.push( aBall )
? ? ? ?
? ?}
}

//繪制當前canvas畫布的函數(shù)
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);//一個數(shù)字一個數(shù)字繪制時間
? ?renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);//第二個時鐘數(shù)字繪制
? ?renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);//第二個時鐘數(shù)字繪制
? ?renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);//一個數(shù)字一個數(shù)字繪制時間
? ?renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);//第二個時鐘數(shù)字繪制
? ?renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);//第二個時鐘數(shù)字繪制
? ?renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);//一個數(shù)字一個數(shù)字繪制時間
? ?renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);//第二個時鐘數(shù)字繪制
? ?
//對掉落小球的繪制
? ?for(var i =0;i<balls.length;i++){
? ? ? ?cxt.fillStyle=balls[i].color;

? ? ? ?cxt.beginPath();
? ? ? ?cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );


? ? ? ?cxt.fill();
? ?}


}
//繪制每一個數(shù)字函數(shù)
function ?renderDigit(x,y,num,cxt){
? ?cxt.fillStyle = "#abcdef";//圓球的顏色

? ?for(var i=0;i<digit[num].length;i++)//代表一個數(shù)字的列數(shù)
? ? ? ?for(var j=0;j<digit[num][i].length;j++)//代表一個數(shù)字的行數(shù)
? ? ? ? ? ?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()
? ? ? ? ? ?}
? ? ?
?
}