Skip to content

Commit b390dc2

Browse files
xiaowugdxiaowugd
authored
Add files via upload
1 parent 1094377 commit b390dc2

File tree

1 file changed

+285
-0
lines changed

1 file changed

+285
-0
lines changed

‎index.html‎

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Clock</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
background-color: var(--bg-color);
12+
color: var(--text-color);
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
height: 100vh;
18+
position: relative;
19+
background-size: cover;
20+
background-position: center;
21+
transition: all 0.5s;
22+
}
23+
24+
.footer {
25+
position: fixed;
26+
bottom: 20px;
27+
left: 50%;
28+
font-size: 14px;
29+
transform: translateX(-50%);
30+
}
31+
32+
.context-menu {
33+
position: fixed;
34+
background-color: rgba(151, 151, 151, 0.523);
35+
padding: 10px;
36+
display: none;
37+
z-index: 999;
38+
border-radius: 8px;
39+
opacity: 0;
40+
transition: all 0.3s ease;
41+
}
42+
43+
.context-menu.show {
44+
display: block;
45+
opacity: 1;
46+
}
47+
48+
.context-menu ul {
49+
list-style-type: none;
50+
margin: 0;
51+
padding: 0;
52+
}
53+
54+
.context-menu li {
55+
font-size: 16px;
56+
padding: 5px 10px;
57+
cursor: pointer;
58+
border-radius: 8px;
59+
}
60+
61+
.context-menu li:hover {
62+
background-color: rgba(255, 255, 255, 0.2);
63+
}
64+
65+
:root {
66+
--bg-color: #f0f0f0;
67+
--text-color: #333;
68+
}
69+
70+
@media (prefers-color-scheme: dark) {
71+
:root {
72+
--bg-color: #111111;
73+
--text-color: #f0f0f0;
74+
}
75+
}
76+
77+
.firework {
78+
position: absolute;
79+
display: none;
80+
z-index: 1000;
81+
}
82+
83+
.particle {
84+
position: absolute;
85+
border-radius: 50%;
86+
pointer-events: none;
87+
animation: explode 1s forwards;
88+
}
89+
90+
@keyframes explode {
91+
0% {
92+
transform: translate(0) scale(1);
93+
}
94+
100% {
95+
transform: translate(var(--x), var(--y)) scale(0);
96+
opacity: 0;
97+
}
98+
}
99+
100+
.clock {
101+
position: relative;
102+
width: 30vw;
103+
height: 30vw;
104+
max-width: 300px;
105+
max-height: 300px;
106+
border: 10px solid #ccc;
107+
border-radius: 50%;
108+
background: rgba(255, 255, 255, 0.1);
109+
backdrop-filter: blur(10px);
110+
margin-top: 20px;
111+
}
112+
113+
.hand {
114+
position: absolute;
115+
background: #333;
116+
border-radius: 10px;
117+
transform-origin: bottom center;
118+
transition: transform 0.6s ease;
119+
}
120+
121+
.hour-hand {
122+
width: 8px;
123+
height: 23%;
124+
bottom: 50%;
125+
left: 49.6%;
126+
transform: translate(-50%, 0);
127+
}
128+
129+
.minute-hand {
130+
width: 6px;
131+
height: 33%;
132+
bottom: 50%;
133+
left: 49.6%;
134+
transform: translate(-50%, 0);
135+
}
136+
137+
.second-hand {
138+
width: 4px;
139+
height: 40%;
140+
bottom: 50%;
141+
left: 50%;
142+
transform: translate(-50%, 0);
143+
background-color: #f9bf90;
144+
}
145+
146+
.center-circle {
147+
position: absolute;
148+
width: 20px;
149+
height: 20px;
150+
background: #333;
151+
border-radius: 50%;
152+
top: 50%;
153+
left: 50%;
154+
transform: translate(-50%, -50%);
155+
}
156+
157+
@media (prefers-color-scheme: dark) {
158+
.clock {
159+
background: rgba(255, 255, 255, 0.05);
160+
border-color: #444;
161+
}
162+
.hand {
163+
background: #fff;
164+
}
165+
.second-hand {
166+
background: orange;
167+
}
168+
}
169+
170+
@media (max-width: 600px) {
171+
.clock {
172+
width: 70vw;
173+
height: 70vw;
174+
max-width: 200px;
175+
max-height: 200px;
176+
}
177+
178+
.footer {
179+
font-size: 12px;
180+
}
181+
}
182+
183+
@media (min-width: 1200px) {
184+
.clock {
185+
width: 40vw;
186+
height: 40vw;
187+
max-width: 500px;
188+
max-height: 500px;
189+
}
190+
}
191+
</style>
192+
</head>
193+
<body>
194+
<div class="clock">
195+
<div class="hand hour-hand"></div>
196+
<div class="hand minute-hand"></div>
197+
<div class="hand second-hand"></div>
198+
<div class="center-circle"></div>
199+
</div>
200+
201+
<div class="footer">&copy; 2025 Xiaowugd</div>
202+
203+
<div class="context-menu" id="context-menu">
204+
<ul>
205+
<li onclick="launchFirework(event)">放个烟花</li>
206+
</ul>
207+
</div>
208+
209+
<script>
210+
function setClock() {
211+
const now = new Date();
212+
const seconds = now.getSeconds();
213+
const minutes = now.getMinutes();
214+
const hours = now.getHours();
215+
const secondHand = document.querySelector('.second-hand');
216+
const minuteHand = document.querySelector('.minute-hand');
217+
const hourHand = document.querySelector('.hour-hand');
218+
const secondsDegrees = ((seconds + now.getMilliseconds() / 1000) / 60) * 360;
219+
const minutesDegrees = ((minutes + seconds / 60) / 60) * 360;
220+
const hoursDegrees = ((hours + minutes / 60) / 12) * 360;
221+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
222+
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
223+
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
224+
225+
// 修复跳跃问题
226+
if (seconds === 0) {
227+
secondHand.style.transition = 'none'; // 无动画
228+
setTimeout(() => {
229+
secondHand.style.transition = 'transform 0.6s ease'; // 启用动画
230+
}, 100); // 100ms后重新启用
231+
}
232+
}
233+
setInterval(setClock, 1000);
234+
setClock();
235+
236+
// 烟花效果
237+
document.addEventListener('contextmenu', function (event) {
238+
event.preventDefault();
239+
const contextMenu = document.getElementById('context-menu');
240+
contextMenu.style.left = event.pageX + 'px';
241+
contextMenu.style.top = event.pageY + 'px';
242+
contextMenu.classList.add('show');
243+
});
244+
245+
document.addEventListener('click', function () {
246+
const contextMenu = document.getElementById('context-menu');
247+
contextMenu.classList.remove('show');
248+
});
249+
250+
function launchFirework(event) {
251+
const numParticles = 68;
252+
for (let i = 0; i < numParticles; i++) {
253+
createParticle(event.pageX, event.pageY);
254+
}
255+
}
256+
257+
function createParticle(x, y) {
258+
const particle = document.createElement('div');
259+
particle.className = 'particle';
260+
document.body.appendChild(particle);
261+
262+
const size = Math.random() * 10 + 8;
263+
particle.style.width = `${size}px`;
264+
particle.style.height = `${size}px`;
265+
266+
const randomColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
267+
particle.style.backgroundColor = randomColor;
268+
269+
const angle = Math.random() * 6 * Math.PI;
270+
const distance = Math.random() * 150 + 100;
271+
272+
particle.style.left = `${x}px`;
273+
particle.style.top = `${y}px`;
274+
particle.style.setProperty('--x', Math.cos(angle) * distance + 'px');
275+
particle.style.setProperty('--y', Math.sin(angle) * distance + 'px');
276+
277+
particle.style.display = 'block';
278+
279+
particle.addEventListener('animationend', () => {
280+
particle.remove();
281+
});
282+
}
283+
</script>
284+
</body>
285+
</html>

0 commit comments

Comments
 (0)