blob: ca446b6bd994f372516c5b31b178d7b50146a09c (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<style>
#clock {
display: flex;
gap: 1rem;
}
.digitContainer {
display: block;
background-color: green;
height: 100px;
width: 60px;
}
.digitContainer img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="test"></div>
<div id="clock">
<div class="digitContainer"><img id="hour1"></img></div>
<div class="digitContainer"><img id="hour2"></img></div>
<div class="digitContainer"><img id="minute1"></img></div>
<div class="digitContainer"><img id="minute2"></img></div>
<div class="digitContainer"><img id="second1"></img></div>
<div class="digitContainer"><img id="second2"></img></div>
</div>
<script>
// gather relevant elements
let hour1 = document.getElementById("hour1");
let hour2 = document.getElementById("hour2");
let minute1 = document.getElementById("minute1");
let minute2 = document.getElementById("minute2");
let second1 = document.getElementById("second1");
let second2 = document.getElementById("second2");
// prepare clock
let clock = document.getElementById("test");
let timeFormat = new Intl.DateTimeFormat("en-US", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
timeZone: "America/New_York",
});
// start text-clock
clock.innerText = timeFormat.format(Date.now());
setInterval(() => {
clock.innerText = timeFormat.format(Date.now());
}, 1000);
// start crazy-clock
setInterval(() => {
const time = timeFormat.format(Date.now());
const i1 = Math.round(Math.random()) + 1;
const i2 = Math.round(Math.random()) + 1;
const i3 = Math.round(Math.random()) + 1;
const i4 = Math.round(Math.random()) + 1;
const i5 = Math.round(Math.random()) + 1;
const i6 = Math.round(Math.random()) + 1;
const h1 = time[0];
const h2 = time[1];
const m1 = time[3];
const m2 = time[4];
const s1 = time[6];
const s2 = time[7];
// console.log(h1 + h2 + ':' + m1 + m2 + ':' + s1 + s2);
hour1.src = "./numbers/" + h1 + "/" + i1 + ".png";
hour2.src = "./numbers/" + h2 + "/" + i2 + ".png";
minute1.src = "./numbers/" + m1 + "/" + i3 + ".png";
minute2.src = "./numbers/" + m2 + "/" + i4 + ".png";
second1.src = "./numbers/" + s1 + "/" + i5 + ".png";
second2.src = "./numbers/" + s2 + "/" + i6 + ".png";
}, 1000);
</script>
</body>
</html>
|
