var CANVAS_WIDTH = 1024;

var CANVAS_HEIGHT = 768;

var RADIUS = 5;

var MARGIN_TOP = 280;

var MARGIN_LEFT = 30;

var DEV = 10;//:是digit[10]

const endTime = new Date(2015,10,23,00,00,00);

var secondsCurToEnd = 0;

var balls = [];

const colors = ["#3385E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

window.onload = function() {

canvas = document.getElementById("canvas");

if(canvas.getContext("2d")) {

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

} else {

alert("当前浏览器不支持canvas，请更换浏览器后再试");

}

canvas.width = CANVAS_WIDTH;

canvas.height = CANVAS_HEIGHT;

secondsCurToEnd = getSecondsCurToEnd();

setInterval(

function() {

render(context);

update();

},

50

);

}

function getSecondsCurToEnd() {

var curTime = new Date();

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

rtn = Math.round(rtn/1000);

return rtn>=0 ? rtn : 0;

}

function update() {

var secondsNextToEnd = getSecondsCurToEnd();

var nextHours = Math.floor(secondsNextToEnd/3600);

var nextMinutes = Math.floor((secondsNextToEnd-nextHours*3600)/60);

var nextSeconds = Math.floor(secondsNextToEnd%60);

var nextHours_b = Math.floor(nextHours/100);

var nextHours_s = Math.floor(nextHours%100/10);

var nextHours_g = Math.floor(nextHours%10);

var nextMinutes_s = Math.floor(nextMinutes/10);

var nextMinutes_g = Math.floor(nextMinutes%10);

var nextSeconds_s = Math.floor(nextSeconds/10);

var nextSeconds_g = Math.floor(nextSeconds%10);

var curHours = Math.floor(secondsCurToEnd/3600);

var curMinutes = Math.floor((secondsCurToEnd-curHours*3600)/60);

var curSeconds = Math.floor(secondsCurToEnd%60);

var curHours_b = Math.floor(curHours/100);

var curHours_s = Math.floor(curHours%100/10);

var curHours_g = Math.floor(curHours%10);

var curMinutes_s = Math.floor(curMinutes/10);

var curMinutes_g = Math.floor(curMinutes%10);

var curSeconds_s = Math.floor(curSeconds/10);

var curSeconds_g = Math.floor(curSeconds%10);

if(nextSeconds != curSeconds) {

if(curHours_b != nextHours_b) {

addBalls(00*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);

}

if(curHours_s != nextHours_s) {

addBalls(15*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_s);

}

if(curHours_g != nextHours_g) {

addBalls(30*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_g);

}

if(curMinutes_s != nextMinutes_s) {

addBalls(54*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);

}

if(curMinutes_g != nextMinutes_g) {

addBalls(69*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);

}

if(curSeconds_s != nextSeconds_s) {

addBalls(93*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);

}

if(curSeconds_g != nextSeconds_g) {

addBalls(108*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,curHours_b);

}

secondsCurToEnd = secondsNextToEnd;

}

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 >= CANVAS_HEIGHT-RADIUS) {

balls[i].y = CANVAS_HEIGHT-RADIUS;

balls[i].vy = -balls[i].vy*0.75;

}

}

}

function addBalls(x,y,num) {

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

var aball = {

centerX:x+j*2*(RADIUS+1),

centerY:y+i*2*(RADIUS+1),

g:1.5+Math.random(),

vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//+/-4

vy:-5,

color:colors[Math.floor(Math.random()*colors.length)]

}

balls.push(aball);

}

}

}

}

function render(cxt) {

cxt.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);

// var hours = parseInt(secondsCurToEnd/3600);

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

// var seconds = parseInt(secondsCurToEnd%60);

// var hours_b = parseInt(hours/100);

// var hours_s = parseInt(hours%100/10);

// var hours_g = parseInt(hours%10);

// var minutes_s = parseInt(minutes/10);

// var minutes_g = parseInt(minutes%10);

// var seconds_s = parseInt(seconds/10);

// var seconds_g = parseInt(seconds%10);

var hours = Math.floor(secondsCurToEnd/3600);

var minutes = Math.floor((secondsCurToEnd-hours*3600)/60);

var seconds = Math.floor(secondsCurToEnd%60);

var hours_b = Math.floor(hours/100);

var hours_s = Math.floor(hours%100/10);

var hours_g = Math.floor(hours%10);

var minutes_s = Math.floor(minutes/10);

var minutes_g = Math.floor(minutes%10);

var seconds_s = Math.floor(seconds/10);

var seconds_g = Math.floor(seconds%10);

// var time = [hours_s,hours_g,DEV,minutes_s,minutes_g,DEV,seconds_s,seconds_g];

// for (var i=0;i<time.length;i++) {

// renderDigit(i*15*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,time[i],cxt);

// }

renderDigit(00*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,hours_b,cxt);

renderDigit(15*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,hours_s,cxt);

renderDigit(30*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,hours_g,cxt);

renderDigit(45*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,DEV,cxt);

renderDigit(54*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,minutes_s,cxt);

renderDigit(69*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,minutes_g,cxt);

renderDigit(84*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,DEV,cxt);

renderDigit(93*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,seconds_s,cxt);

renderDigit(108*(RADIUS+1)+MARGIN_LEFT,MARGIN_TOP,seconds_g,cxt);

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

cxt.closePath();

cxt.fill();

}

}

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

centerX = x+j*2*(RADIUS+1)+(RADIUS+1);

centerY = y+i*2*(RADIUS+1)+(RADIUS+1);

cxt.beginPath();

cxt.arc(centerX,centerY,RADIUS,0,2*Math.PI);

cxt.closePath();

cxt.fill();

}

}

}

}