-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
70 lines (70 loc) · 2.35 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模拟时钟</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<button id="darkmode-button">切换</button>
</header>
<div class="container">
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="minute">
<div class="min" id="min"></div>
</div>
<div class="second">
<div class="sec" id="sec"></div>
</div>
</div>
</div>
<script src="darken.umd.js"></script>
<script>
const darkmode = new darken({
variables: {
"--container-background": [" #00eeff", "#091921"],
"--clock-background": [
" #fff url(clock.png)",
"#091921 url(clock.png)"
],
"--clock-border": [" 20px solid #fff", "20px solid #091921"],
"--clock-box-shadow": [
" inset 0 0 30px rgba(0, 0, 0, 0.1),0 20px 20px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(255, 255, 255, 1)",
"inset 0 0 30px rgba(255, 255, 255, 0.1),0 20px 20px rgba(255, 255, 255, 0.2), 0 0 0 4px rgba(0, 0, 0, 1)"
],
"--clock-before-background": [" #848484", "#848484"],
"--clock-before-border": [" 2px solid #fff", "2px solid #fff"],
"--hr-background": [" #848484", "#d6d6d6"],
"--min-background": [" #d6d6d6", "#848484"],
"--sec-background": [" #ff6767", "#ff105e"]
},
toggle: "#darkmode-button"
});
const mode = getComputedStyle(document.documentElement).getPropertyValue(
"content"
);
if (mode == '"dark"') {
darkmode.on();
} else darkmode.off();
</script>
<script>
setInterval(() => {
const hr = document.querySelector("#hr");
const min = document.querySelector("#min");
const sec = document.querySelector("#sec");
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * 6;
let ss = day.getSeconds() * 6;
hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
min.style.transform = `rotateZ(${mm}deg)`;
sec.style.transform = `rotateZ(${ss}deg)`;
});
</script>
</body>
</html>