//逻辑
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8; //半径
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
//一天24个小时，小时是两位数。100%24=5最多设置4天。
//月份如果想是4月，就必须要传3月。
const endTime=new Date(2017,2,13,20,47,52);
var curShowTimeSeconds=0;
var balls=[];//给生成的小球设置一个可以存放的数组。
//给小球设置颜色。
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
window.onload = function(){
WINDOW_WIDTH = document.body.clientWidth;
WINDOW_HEIGHT = document.body.clientHeight;
MARGIN_LEFT = Math.round(WINDOW_WIDTH /10);
RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108)-1;
MARGIN_TOP = Math.round(WINDOW_HEIGHT /5);
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
//获开屏幕宽高。
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
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(curSeconds%10));
}
curShowTimeSeconds=nextShowTimeSeconds;
}
//对已经产生小球的变化进行更新。
updateBalls();
console.log(balls.length);
}
//对已经产生小球的变化进行更新。
function updateBalls(){
for(var i=0;i=WINDOW_HEIGHT-RADIUS){
balls.y=WINDOW_HEIGHT-RADIUS;
balls.vy=-balls.vy*0.75;
}
}
var cnt = 0;
for( var i = 0 ; i < balls.length ; i ++ )
//将符合情况的小球留在画布中。
if( balls.x + RADIUS > 0 && balls.x -RADIUS < WINDOW_WIDTH )
balls[cnt++] = balls;
while( balls.length > cnt ){
balls.pop();//将不符合条件的小球释放。
}
}
//添加小球的方法。
function addBalls(x,y,num){
//对于num加上彩色的小球。
for( var i = 0;i < digit[num].length;i ++ )//找到该数组对应的数字。
for(var j = 0;j < digit[num].length;j ++ )//判断数组的列。
if(digit[num][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,//-1的多少次方。乘以4得到-4或者4。
vy:-5,
//随机索引方法。
color:colors[Math.floor(Math.random()*colors.length)]
}
balls.push(aBall);//把这些小球放入到balls这个数组中去。
}
}
//绘制时钟。绘制小球。
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 |
天盟APP下载
