/**
* Created by Administrator on 2015/11/7.
*/
//倒计时时钟的实现
var WINDOW_WIDTH=1024;
var WINDOW_HEIGTH=768;
var RADIUS=7;
var MARGIN_TOP=60;
var MARGIN_LEFT=30;
var ENDTIME=new Date(2015,10,11,21,30,59);//返回指定时间据公元的毫秒,月数从0开始，10表示11月份
var curShowTimeSeconds=0;
var ball=[];
var 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_HEIGTH;
curShowTimeSeconds=getSeconds();
setInterval(
function(){
update(context);//更新显示时间
render(context);
},
50
)
}
function getSeconds(){
var now_time=new Date();//获取当前时间
var cur_time=now_time.getTime();
var end_time=ENDTIME.getTime();
var seconds=(end_time-cur_time)/1000;
return seconds >=0 ? seconds:0;
}
function update(ctx){
var nextShowTimeSeconds = getSeconds();
//下一个时间的
var nextHours = parseInt( nextShowTimeSeconds / 3600);
var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 );
var nextSeconds = nextShowTimeSeconds % 60;
var curHours = parseInt( curShowTimeSeconds / 3600);
if(curHours/10!=nextHours/10){
addBall(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));
}
if(curHours%10!=nextHours%10){
addBall(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
}
var curMinutes = parseInt( (curShowTimeSeconds - curHours * 3600)/60 );
if(curMinutes/10!=nextMinutes/10){
addBall(MARGIN_LEFT+45*(RADIUS+1),MARGIN_TOP,curMinutes/10);
}
if(curMinutes%10!=nextMinutes%10){
addBall(MARGIN_LEFT+60*(RADIUS+1),MARGIN_TOP,curMinutes%10);
}
var curSeconds = curShowTimeSeconds % 60;
if(curSeconds/10!=nextSeconds/10){
addBall(MARGIN_LEFT+90*(RADIUS+1),MARGIN_TOP,curSeconds/10);
}
if(curSeconds%10!=nextSeconds%10){
addBall(MARGIN_LEFT+105*(RADIUS+1),MARGIN_TOP,curSeconds%10);
}
if( nextSeconds != curSeconds ) {
curShowTimeSeconds = nextShowTimeSeconds;
}
updateBall();
}
function addBall( x , y , num ){
var num=digit[Math.floor(num)];
var digit_len=num.length;
for( var i = 0 ; i < digit_len ; i ++ )
for( var j = 0 ; j <num[i].length ; j ++ )
if( num[i][j]==1){
var aBall = {
x:x+j*2*(RADIUS+1)+(RADIUS+1),
y: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 ) ]
};
console.log("push ball");
ball.push( aBall );
}
}
function updateBall(){
for(var i=0;i<ball.length;i++){
ball[i].x=ball[i].x+ball[i].vx;
ball[i].y=ball.y+ball[i].vy;
if(ball[i].y>=WINDOW_HEIGTH){
ball[i].y=WINDOW_HEIGTH-RADIUS;
ball[i].vy=-ball[i].vy*0.75;
}
ball[i].vy=ball[i].vy+ball[i].g;
}
}
function render(ctx){
var hours = parseInt( curShowTimeSeconds / 3600);
var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 );
var seconds = curShowTimeSeconds % 60;
ctx.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGTH);//清屏
renderdigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),ctx);
renderdigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),ctx);
renderdigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);
renderdigit(MARGIN_LEFT+45*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx);
renderdigit(MARGIN_LEFT+60*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx);
renderdigit(MARGIN_LEFT+75*(RADIUS+1),MARGIN_TOP,10,ctx);
renderdigit(MARGIN_LEFT+90*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx);
renderdigit(MARGIN_LEFT+105*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx);
for( var i = 0 ; i < ball.length ; i ++ ){
console.log(ball[i].color);
ctx.beginPath();
ctx.arc( ball[i].x , ball[i].y , RADIUS , 0 , 2*Math.PI , true );
ctx.fillStyle=ball[i].color;
ctx.closePath();
ctx.fill();
}
}
function renderdigit(top,left,num,ctx){
var num=digit[num];
var digit_len=num.length;
var digit_0=num[0];
for(var i=0;i<digit_len;i++){
for(var j=0;j<num[i].length;j++){
if(num[i][j]==1){
ctx.beginPath();
ctx.fillStyle="#50cfc3";
ctx.arc(top+j*2*(RADIUS+1)+(RADIUS+1),left+i*2*RADIUS+(RADIUS+1),RADIUS,0,2*Math.PI,false);
ctx.closePath();
ctx.fill();
}
}
}
}
qq_安伊偌拉_0
相关分类