主要是利用height: 0翻页，并不断更新元素。
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
| <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>
|
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
| 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)
|
css
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;
}
|