为什么我的没出来效果
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 =[]//掉落小球的数组；
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);//绘制函数
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 = 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++)//代表一个数字的列数
for(var j=0;j<digit[num][i].length;j++)//代表一个数字的行数
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画布的函数
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);//一个数字一个数字绘制时间
renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);//第二个时钟数字绘制
renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);//第二个时钟数字绘制
renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);//一个数字一个数字绘制时间
renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);//第二个时钟数字绘制
renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);//第二个时钟数字绘制
renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);//一个数字一个数字绘制时间
renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),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 , true );
cxt.fill();
}
}
//绘制每一个数字函数
function renderDigit(x,y,num,cxt){
cxt.fillStyle = "#abcdef";//圆球的颜色
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()
}
}
