Hexo 魔改 添加电子时钟

源代码地址

注意：

1、因为页面中地方有限，对源码进行了修改，简化了页面元素。
2、修改了时间数据获取的方式。

预览效果

100%宽度

100%宽度

代码

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
#clock
    .display
        .weekdays
        .digits
script.
    (() => {

        var alarm_counter = -1;
        var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');
        var digits = {};
        var positions = ['h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'];
        var digit_holder = document.querySelector('#clock .digits');

        for (let i = 0; i < positions.length; i++) {
            if (positions[i] == ':') {
                var dots = document.createElement('div');
                dots.className = 'dots'
                digit_holder.appendChild(dots)
            } else {

                var pos = document.createElement('div');

                for (let j = 1; j < 8; j++) {
                    var span = document.createElement('sapn');
                    span.className = 'd'+j
                    pos.appendChild(span)
                }

                // Set the digits as key:value pairs in the digits object
                digits[positions[i]] = pos;

                // Add the digit elements to the page
                digit_holder.append(pos);
            }
        }

        var weekday_names = '周日 周一 周二 周三 周四 周五 周六'.split(' '),
            weekday_holder = document.querySelector('#clock .weekdays');
        var dow = new Date().getDay();
        for (let i = 0; i < weekday_names.length; i++) {
            var span = document.createElement('sapn');
            span.innerText = weekday_names[i]
            span.className = 'weekday_name'
            // span.style = 'opacity:0.2;padding:0 10px;';
            if (i == dow) {
                span.className = 'weekday_name active'
                span.style = 'opacity:1;';
            }
            weekday_holder.appendChild(span);
        }

        var weekdays = document.querySelector('#clock .weekdays').children;



        update_time()

        function update_time() {
            // var now = moment().format("hhmmssdA");
            var h = new Date().getHours();
            var m = new Date().getMinutes();
            var s = new Date().getSeconds();
            var now = (h>10?h:'0'+h) +''+(m>10?m:'0'+m) +''+ (s>10?s:'0'+s);

            digits.h1.setAttribute('class', digit_to_name[now[0]]);
            digits.h2.setAttribute('class', digit_to_name[now[1]]);
            digits.m1.setAttribute('class', digit_to_name[now[2]]);
            digits.m2.setAttribute('class', digit_to_name[now[3]]);
            digits.s1.setAttribute('class', digit_to_name[now[4]]);
            digits.s2.setAttribute('class', digit_to_name[now[5]]);



            if (alarm_counter > 0) {
                alarm_counter--;
            } else if (alarm_counter == 0) {
                alarm_counter--;
            }
            // Schedule this function to be run again in 1 sec
            setTimeout(update_time, 1000);
        }
    })()