<!DOCTYPE HTML>
<html lang="zh" style="height:100%;">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="applicable-device" content="pc,mobile"/>
<meta name="renderer" content="webkit"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>title</title>
<!-- <style>
.class{width:200px;height:200px;position:absolute;color:#FFFFFF;font-size:24px;}
.class{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7FFF0000', endColorstr='#7FFF0000');background:rgba(255,0,0,0.5);}
:root .class{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00FF0000', endColorstr='#00FF0000');}/*for IE9*/
/*或者ie9的hack使用：*/
/*:root .class{filter:none;}!*for IE9*!*/
</style>-->
</head>
<body style="height:100%;">
<canvas id="canv1" style="height:100%;"></canvas>
<script>
//数字点阵3维数组
var numbers=[
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1]
],
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[1,1,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,1,1,1,0,0],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1]
],
[
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1]
],
[
[0,1,1,1,1,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[1,1,1,1,0,0,0],
[1,1,1,1,0,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[1,1,1,1,1,1,0],
[0,1,1,1,1,0,0]
],
[
[0,0,0,0,0,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0]
],
[
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1]
],
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,1,0,0,0],
[0,1,1,1,1,0,0],
[1,1,0,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1],
[0,1,1,1,1,0,0]
],
[
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1]
],
[
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1],
[1,1,1,1,1,1,1]
],
[
[0,1,1,1,1,1,0],
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1],
[0,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1]
],
[
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0]
]
];
var window_width=document.body.clientWidth;
var window_height=document.body.clientHeight;
var x=Math.round(window_width/10); //最左边的数字距离画布左边的宽度
var y=Math.round(window_width/5); //最左边的数字距离画布上边的高度
var r=Math.round(window_width*4/5/108)-1; //小圆的半径
/*const endtime=new Date(2016,6,23,22,19,35);//倒计时结束时间
//月份是从0开始的；
//在这个程序中 小时只设计了两位数 所以倒计时最多只能4天；*/
var endtime=new Date();
endtime.setTime(endtime.getTime()+3600*1000);//倒计时一个小时；
var curShowTimeSeconds=0;//记录当前时间
var balls=[];//存贮生成的小球
const colors=['#f00','#0f0','#f00','#f54343','#93c','#09c','#f00','#f54343','#93c','#09c'];
window.onload=function(){
var canvas=document.getElementById('canv1');
var content=canvas.getContext('2d');
canvas.width=window_width;
canvas.height=window_height;
curShowTimeSeconds=getCurrentShowTimeSeconds();//当前时间
render(content);
setInterval(function(){
update();
render(content);
},50);
};
//获取时间秒数
function getCurrentShowTimeSeconds(){
var curTime=new Date();
/*var ret=endtime.getTime()-curTime.getTime(); //倒计时
ret= Math.round(ret/1000);
return ret>0?ret:0;*/
var ret = curTime.getHours()*3600+curTime.getMinutes()*60+curTime.getSeconds(); //时钟
return ret;
}
//计算倒计时的时间；计算小圆点的位置
function render(content){
content.clearRect(0,0,window_width,window_height);//清空画布；
var h=parseInt(curShowTimeSeconds/3600);
var m=parseInt((curShowTimeSeconds%3600)/60);//var m=parseInt((curShowTimeSeconds-h*3600)/60);
var s=curShowTimeSeconds%60;
//绘制倒计时数字小圆点
renderDigit(x,y,parseInt(h/10),content);
renderDigit(x+15*(r+1),y,parseInt(h%10),content);
renderDigit(x+30*(r+1),y,10,content);//冒号
renderDigit(x+39*(r+1),y,parseInt(m/10),content);
renderDigit(x+54*(r+1),y,parseInt(m%10),content);
renderDigit(x+69*(r+1),y,10,content);
renderDigit(x+78*(r+1),y,parseInt(s/10),content);
renderDigit(x+93*(r+1),y,parseInt(s%10),content);
//绘制运动的小球
for(var i=0;i<balls.length;i++){
content.beginPath();
content.arc( balls[i].x , balls[i].y , r, 0 ,Math.PI*2);
content.closePath();
content.fillStyle=balls[i].color;
content.fill();
}
}
//绘制倒计时数字小圆点
function renderDigit(x,y,n,ctx){
var num=numbers[n];//数字下标 ，获取对应的数组
for(var i=0;i<num.length;i++){
for(var j=0;j<num[i].length;j++){
var cx=x+2*j*(r+1)+r+1;
var cy=y+2*i*(r+1)+r+1;
if(num[i][j]==1){//在三维数组中 数字为1的地方绘制小圆
ctx.beginPath();
ctx.arc(cx,cy,r,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle="red";
ctx.fill();
}
}
}
}
function update(){//时间改变；生成新的小球；
var nextShowTimeSeconds=getCurrentShowTimeSeconds();//下一秒时间
var nextHours=parseInt(nextShowTimeSeconds/3600);
var nextMinutes=parseInt((nextShowTimeSeconds%3600)/60);
var nextSeconds=nextShowTimeSeconds%60;
var curHours=parseInt(curShowTimeSeconds/3600);
var curMinutes=parseInt((curShowTimeSeconds%3600)/60);
var curSeconds=curShowTimeSeconds%60;
if(nextSeconds!=curSeconds){//比较下一秒的时间和当期时间，只需要比较秒数；如果发生变化，让当前时间等于下一秒的时间；并且生成小球；
//生成小球：比较6个数字 哪个数字发生改变 就在这个数字的小圆点地方生成小球
if(parseInt(curHours/10)!=parseInt(nextHours/10)){
addBalls( x ,y ,parseInt(curHours/10));
}
if(parseInt(curHours%10)!=parseInt(nextHours%10)){
addBalls( x+15*(r+1) ,y ,parseInt(curHours%10));
}
if(parseInt(curMinutes/10)!=parseInt(nextMinutes/10)){
addBalls( x+39*(r+1) ,y ,parseInt(curMinutes/10));
}
if(parseInt(curMinutes%10)!=parseInt(nextMinutes%10)){
addBalls( x+54*(r+1) ,y ,parseInt(curMinutes%10));
}
if(parseInt(curSeconds/10)!=parseInt(nextSeconds/10)){
addBalls( x+78*(r+1) ,y ,parseInt(curSeconds/10));
}
if(parseInt(curSeconds%10)!=parseInt(nextSeconds%10)){
addBalls( x+93*(r+1) ,y ,parseInt(curSeconds%10));
}
//让当前时间等于下一秒的时间；
curShowTimeSeconds=nextShowTimeSeconds;
}
updateBalls();
// console.log(balls.length)
}
//改变小球的位置 让小球运动起来；
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-r){
balls[i].y=window_height-r;
balls[i].vy=-balls[i].vy*0.5;//小球碰到底部反弹，并增加摩擦系数；
}
}
//控制小球数量 保留在画布中的
var cnt=0;
for(var i=0;i<balls.length;i++){
if( balls[i].x+r>0 && balls[i].x-r<window_width )balls[cnt++]=balls[i];//保留在画布中的小球留在数组前面
//小球的右边缘 小球的左边缘
}
/* while( balls.length>cnt ){
balls.pop();
}*/
while( balls.length>Math.min(300,cnt) ){//如果cnt比300小 ，就取cnt，否则取300；
balls.pop();
}
}
//设置运动小球的属性
function addBalls( x ,y ,n){
var num=numbers[n];
for(var i=0;i<num.length;i++){
for(var j=0;j<num[i].length;j++){
var cx=x+2*j*(r+1)+r+1;
var cy=y+2*i*(r+1)+r+1;
if(num[i][j]==1){//在三维数组中 数字为1的地方绘制小圆
var aBall={
x:cx,
y:cy,
g:1.5+Math.random(),
vx:Math.pow(-1,Math.ceil(Math.random()*1000)) *4,//+4或者-4
vy:-5,
color:colors[ Math.floor( Math.random()*colors.length ) ]
};
balls.push(aBall);
}
}
}
}
</script>
</body>
</html>
