绚丽时钟

本文最后更新于：2023年3月30日 下午

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>绚丽时钟</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/digit.js"></script>
    <script type="text/javascript" src="js/time.js"></script>
    <!--[if lt IE 9]>
   <script type="text/javascript">
       (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()<![endif]-->
    </script>
</head>
<body>
<canvas id="canvas" width="1024" height="768">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
</body>
</html>

css:

1
2
3
4
5
6
7
8
9
10
@charset "utf-8";
/* CSS Document */
body, div, h1, h2, h3, h4, h5, span, a, img, input, ul, li, ol, dl, dt, dd, table, tr, td, p{ margin: 0px; padding: 0px; border: 0px; list-style: none }
body { background:white; font-family: "微软雅黑"; font-size: 12px; background: #f9f9f9 }
input:focus {outline:none;}
a:link, a:visited { text-decoration: none }
a:hover{ text-decoration:underline}
.lb-clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .lb-clearfix{height:1%}
#canvas{ border:1px solid #ccc;display: block;margin:50px auto 0px;}

js:

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
digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [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],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ], // 0
        [
            [0,0,0,1,1,0,0],
            [0,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],
            [1,1,1,1,1,1,1]
        ], // 1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,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,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ], // 2
        [
            [1,1,1,1,1,1,1],
            [0,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,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ], // 3
        [
            [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],
            [0,0,0,1,1,1,1]
        ], // 4
        [
            [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,0],
            [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,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ], // 5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [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],
            [0,1,1,1,1,1,0]
        ], // 6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,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]
        ], // 7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [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],
            [0,1,1,1,1,1,0]
        ], // 8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ], // 9
        [
            [0,0,0,0],
            [0,0,0,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,0,0,0],
            [0,0,0,0]
        ] // :
    ];

js:

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
136
137
138
139
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 425;
var ballCorlor = 'rgb(0,102,153)'; //小 圆的颜色
var RADIUS = 8; // 小圆的半径
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

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');
    if(canvas.getContext('2d')){
        var context = canvas.getContext('2d');
    }
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;
    CurShowTimeSeconds = getCurShowTimeSeconds();
    setInterval(function() {
        // 动画函数包含构建时间的显示即动画的update更新
        render(context);
        update();
    },50);
}
function update() {
    var nextShowTimeSeconds = getCurShowTimeSeconds();
    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, 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(curHours % 10) !== parseInt(nextSeconds % 10)) {
            addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds % 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) {
            balls[i].y = WINDOW_HEIGHT;
            balls[i].vy = -balls[i].vy * 0.65;
        }
    }
    // 减少内存让跳出显示画布外的小球从数组中移除
    var cnt = 0
    for( var i = 0; i < balls.length; i ++ ) {
        if( balls[i].x + RADIUS > 0 && balls[i].x -RADIUS < WINDOW_WIDTH ) {
            balls[cnt++] = balls[i];
        }
    }
    while(balls.length > cnt) {
        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 aBall = {
                    x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1), // x方向的坐标
                    y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1), // y方向的坐标
                    g: 1.5 + Math.random(), // y方向的加速度
                    vx: Math.pow( -1 , Math.ceil(Math.random() * 1000)) * 5, // x方向的速度
                    vy: -5, // y方向的速度
                    color: colors[Math.floor(Math.random() * colors.length)] // 小球的颜色值
                }
                balls.push(aBall);
            }
            // console.log(balls);
        }
    }
}
function getCurShowTimeSeconds() {
    var curTime = new Date(); // 获取单签时间
    var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds(); // 获取当前时间已经走了多少秒
    return ret >= 0 ? ret : 0; // 如果当前到结束时间所有的秒数不大于等于0则让其等于0
}
function render(cxt) {
    cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.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.closePath();
        cxt.fill();
    }
}
function renderDigit(x, y, num, cxt){
    // 从digit.js文件中遍历数字要绘出的数字点阵
    cxt.fillStyle = ballCorlor; // 小球的颜色
    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();
            }
        }
    }
}

演示

developer
#原创 #javaScript
绚丽时钟
https://seven3.site/js/绚丽时钟/
作者
Seven3s
发布于
2015年1月9日
许可协议