一种实现翻页式时钟的方法

杂谈
5.1k 词

主要是利用flex: 0翻页，并不断更新元素。

#
#
#
#
#
#
#
#
#
#
#
# 
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
<div id="app">
    <div id="time">
        <div id="hour">
            <div class="bit first">
                <div>#</div>
                <div>#</div>
            </div>
            <div class="bit last">
                <div>#</div>
                <div>#</div>
            </div>
        </div>
        <div id="min">
            <div class="bit first">
                <div>#</div>
                <div>#</div>
            </div>
            <div class="bit last">
                <div>#</div>
                <div>#</div>
            </div>
        </div>
        <div id="sec">
            <div class="bit first">
                <div>#</div>
                <div>#</div>
            </div>
            <div class="bit last">
                <div>#</div>
                <div>#</div>
            </div>
        </div>
    </div>
</div>
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
let bits = document.getElementsByClassName("bit")
let time

function setNext(node, value) {
    if (node.lastChild.innerText != value) {
        let newBit = document.createElement("div")
        newBit.innerText = value
        node.appendChild(newBit)
        Array.from(node.getElementsByTagName("div")).slice(0, -2).forEach(Element => {
            Element.setAttribute("remove", "")
        })
    }
}

function setTime() {
    let date = new Date();
    time = date.getHours().toString().padStart(2, "0") + date.getMinutes().toString().padStart(2, "0") + date.getSeconds().toString().padStart(2, "0")

    Array.from(bits).forEach((bit, index) => {
        setNext(bits[index], time.slice(index, index + 1))
        Array.from(bit.getElementsByTagName("div")).slice(0, -3).forEach(Element => {
            Element.remove()
        })
    })
}
setInterval(setTime, 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
:root {
    --bits-offset: min(2vw,20px);
    --bit-width: min(8vw,80px);
    --bit-height: min(11vw,110px);
    --bit-margin-bottom: min(1vw,10px);
    --bit-margin-right: min(1vw,10px);
}

#app {
    width: 100%;
    height: calc(var(--bit-height) + var(--bit-margin-bottom) * 2);
}

#time {
    position: relative;
    width: calc(var(--bit-width) * 6 + var(--bits-offset) * 2 + var(--bit-margin-right) * 3);
    height: calc(var(--bit-height) + var(--bit-margin-bottom) * 2);
    margin: 0 auto;
}

#hour,
#min,
#sec {
    position: absolute;
    overflow: hidden;
    width: calc(var(--bit-width) * 2 + var(--bit-margin-right));
    height: calc(var(--bit-height) + var(--bit-margin-bottom) * 2);
}

#min {
    left: calc(var(--bits-offset) + var(--bit-width) * 2 + var(--bit-margin-right));
}

#sec {
    left: calc((var(--bits-offset) + var(--bit-width) * 2 + var(--bit-margin-right)) * 2);
}

.bit {
    display: flex;
    flex-direction: column;
    justify-content: start;

    position: absolute;
    top: calc(0px - var(--bit-height));
}

.bit.last {
    left: calc(var(--bit-width) + var(--bit-margin-right));
}

.bit div {
    width: var(--bit-width);
    height: var(--bit-height);
    font-size: calc(var(--bit-height) * 0.7);
    text-align: center;
    color: #fff;
    line-height: var(--bit-height);
    border-radius: calc(var(--bit-width) * 0.1);
    background: #000;
    margin-bottom: var(--bit-margin-bottom);
    transition: 0.5s ease-in-out;
}

.bit div[remove] {
    height: 0;
    margin-bottom: 0;
}