-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (127 loc) · 4.79 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
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background: url('https://pic.vjshi.com/2020-12-23/041b44ee54c236f7c442b997e934f45c/online/337a8d9f8a569f88976605b8ea831dae.jpg?x-oss-process=style/resize_w_720') center/cover no-repeat fixed;
}
#current-time {
position: absolute;
top: 10px;
left: 10px;
font-size: 1.2em;
color: #3498db; /* 蓝色的当前时间字体颜色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 蓝色字体阴影 */
}
.countdown-box {
display: inline-block;
text-align: center;
margin: 0 10px;
}
.countdown-number {
font-size: 3.5em;
color: #00b4cc; /* 蓝色的倒计时数字 */
margin: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 蓝色字体阴影 */
}
.countdown-title {
font-size: 1.5em;
color: #cc0000; /* 红色的倒计时标题 */
margin: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 红色字体阴影 */
}
#title {
font-size: 3em;
margin-bottom: 20px;
color: #f39c12; /* 橙色的标题字体颜色 */
text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8); /* 橙色字体阴影 */
}
.snow-box {
background-color: rgba(255, 255, 255, 0.7);
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); /* 阴影效果 */
}
</style>
<title>2024年新年倒计时</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
</head>
<body>
<div id="aplayer" class="aplayer" data-order="random" data-id="2944021971" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-volume="0.6"></div>
<div id="current-time"></div>
<h2 id="title">2024新年倒计时</h2>
<div class="snow-box">
<div class="countdown" data-date="2024/2/10 00:00:00">
<div class="countdown-box">
<h4 class="countdown-number" id="days"></h4>
<hr/>
<h4 class="countdown-title">天</h4>
</div>
<div class="countdown-box">
<h4 class="countdown-number" id="hours"></h4>
<hr/>
<h4 class="countdown-title">时</h4>
</div>
<div class="countdown-box">
<h4 class="countdown-number" id="minutes"></h4>
<hr/>
<h4 class="countdown-title">分</h4>
</div>
<div class="countdown-box">
<h4 class="countdown-number" id="seconds"></h4>
<hr/>
<h4 class="countdown-title">秒</h4>
</div>
</div>
</div>
<script>
function updateCurrentTime() {
const now = new Date();
const currentTimeString = `现在时间：${now.toLocaleDateString()} ${now.toLocaleTimeString()}`;
document.getElementById('current-time').innerHTML = currentTimeString;
}
// 目标日期时间：2024年2月10日 00:00:00
const targetDate = new Date('2024/2/10 00:00:00').getTime();
function updateCountdown() {
const currentDate = new Date().getTime();
const timeDifference = targetDate - currentDate;
if (timeDifference > 0) {
const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;
}
}
// 初始调用
updateCurrentTime();
updateCountdown();
// 每秒更新一次
setInterval(() => {
updateCurrentTime();
updateCountdown();
}, 1000);
</script>
<!-- aplayer -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kaygb/kaygb@master/js/v3.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kaygb/kaygb@master/layer/layer.js"></script>
<!-- ads -->
<script src="https://wujiyan.cc/ads.js"></script>
</body>
</html>