-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (134 loc) · 4.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CanvasColock</title>
</head>
<body style="height:100%">
<canvas id="canvas" style="height:100%"></canvas>
</body>
<script type="text/javascript" src="digit.js"></script>
<script type="text/javascript">
//因为js代码量很少就直接写在html页面了
var WINDOW_WIDTH;
var WINDOW_HEIGHT;
var RADIUS;
var context=canvas.getContext("2d");
var MARGIN_TOP;
var MARGIN_LEFT;
var showtime=new Date();
var balls=[];
const colors=["#51F511","#66FAD5","#EF1C3E","#FFFA5F","#DE48CD","#310CF2"];
window.onload=function(){
WINDOW_WIDTH=document.documentElement.clientWidth;
WINDOW_HEIGHT=document.documentElement.clientHeight;
MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
MARGIN_TOP=Math.round(WINDOW_HEIGHT/5);
RADIUS=Math.round(WINDOW_WIDTH*4/5/108)-1;
var canvas=document.getElementById("canvas");
showtime=new Date();
canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT;
setInterval(function(){
render(context);
update();
},50);
}
function render(cxt){
cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
var hours=parseInt(showtime.getHours());
var minutes=parseInt(showtime.getMinutes());
var seconds=parseInt(showtime.getSeconds());
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.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){
cxt.beginPath()
cxt.arc(x+(RADIUS+1)+j*2*(RADIUS+1),y+(RADIUS+1)+i*2*(RADIUS+1),RADIUS,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
function update(){
var nextTime=new Date();
var nexttimehours=parseInt(nextTime.getHours());
var nexttimeminutes=parseInt(nextTime.getMinutes());
var nexttimeseconds=parseInt(nextTime.getSeconds());
var showtimehours=parseInt(showtime.getHours());
var showtimeminutes=parseInt(showtime.getMinutes());
var showtimeseconds=parseInt(showtime.getSeconds());
if(nextTime!=showtime){
if(parseInt(nexttimehours/10)!=parseInt(showtimehours/10)){
addballs(MARGIN_LEFT,MARGIN_TOP,parseInt(nexttimehours/10));
};
if(parseInt(nexttimehours%10)!=parseInt(showtimehours%10)){
addballs(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(nexttimehours%10));
};
if(parseInt(nexttimeminutes/10)!=parseInt(showtimeminutes/10)){
addballs(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeminutes/10));
};
if(parseInt(nexttimeminutes%10)!=parseInt(showtimeminutes%10)){
addballs(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeminutes%10));
};
if(parseInt(nexttimeseconds/10)!=parseInt(showtimeseconds/10)){
addballs(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeseconds/10));
};
if(parseInt(nexttimeseconds%10)!=parseInt(showtimeseconds%10)){
addballs(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nexttimeseconds%10));
};}
showtime=nextTime;
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.6;
}
}
var ballscontol=0;
for(i=0;i<balls.length;i++)
if (balls[i].x + RADIUS>0&&balls[i].x - RADIUS<WINDOW_WIDTH) {
balls[ballscontol++]=balls[i]
}
while(balls.length>Math.min(ballscontol,300)){
balls.pop();
}
}
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 newball={
x : x+(RADIUS+1)+j*2*(RADIUS+1),
y : y+(RADIUS+1)+i*2*(RADIUS+1),
g : 1.5+Math.random(),
vx :Math.pow(-1,Math.floor(Math.random()*100))*5,
vy : -Math.ceil(Math.random()*10),
color :colors[Math.floor(Math.random()*colors.length)]
}
balls.push(newball);
}
}
</script>
</html>