文章摘要
白衣 DeepSeek

前言

折腾一下午手搓出来的，拿走吱一声。喜欢的话在下面演示地址留个走心的祝福吧~

演示地址
情侣空间
本站同款情侣纪念日

一.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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
.bg-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.bg-img {
    width: 100%;
    position: relative;
}

.middle.Blurkg {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 15px;
}

.img-male {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.avatarArea {
    position: relative;
    width: 120px;
    height: 120px;
}

.avatarFrame {
    width: 100%;
    height: 100%;
    border-radius: 50% !important;
    position: relative;
    z-index: 2;
}

.aiv_touxiang {
    width: 100%;
    height: 100%;
    border-radius: 50% !important;
    max-width: 100% !important;
    border: 1px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: cover;
}

.shadow-blur {
    margin-top: 28px;
    font-size: 16px;
    color: white;
    background-color: rgba(0, 0, 0, 0.93);
    padding: 1px 15px;
    border-radius: 20px;
    display: inline-block;
    text-shadow: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.42);
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.love-icon {
    width: 80px;
    height: 80px;
    animation: heartbeat 1.5s ease-in-out infinite;
}

.img-female {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.baiyi-love {
    text-align: center !important;
}

.baiyi-text {
    font-size: 25px;
}

#time-display {
    text-align: center;
    font-size: 20px;
}

#time-display span {
    font-size: 25px;
}

#time-display n {
    font-size: 30px;
    margin-right: 8px;
    font-weight: 800;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* 减小卡片之间的间距 */
    padding: 10px; /* 减小整体的内边距 */
}

.time_card {
    background-color: #333;
    color: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 20px;
    width: calc(50% - 10px); /* 根据新的间距调整宽度 */
    min-width: 300px;
    transition: transform 0.3s ease;
}

.time_card:hover {
    transform: scale(1.05);
}

.left_info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.left_info svg {
    fill: #ff6b6b;
    width: 30px;
    height: 30px;
}

.day_title {
    font-size: 1.2rem;
    font-weight: bold;
}

.time_m {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.source {
    font-weight: bold;
}

.format {
    color: #ccc;
}

/* 767px 以下媒体查询 */
@media (max-width: 767px) {
    .middle.Blurkg {
        padding: 10px;
    }

    .avatarArea {
        width: 90px;
        height: 90px;
    }

    .shadow-blur {
        font-size: 12px;
    }

    .love-icon {
        width: 50px;
        height: 50px;
        margin-top: -10px;
    }

    .row {
        padding: 8px;
        gap: 8px;
    }

    .time_card {
        padding: 15px;
        min-width: 130px;
        width: calc(50% - 8px);
    }

    .left_info svg {
        width: 20px;
        height: 20px;
    }

    .day_title {
        font-size: 0.8rem;
    }

    .time_m {
        font-size: 0.7rem;
    }

    .baiyi-text {
        font-size: 20px;
    }

    #time-display n {
        font-size: 24px;
    }
}

/* 360 - 380px 媒体查询 */
@media (min-width: 360px) and (max-width: 380px) {
    .middle.Blurkg {
        padding: 7px;
    }

    .avatarArea {
        width: 68px;
        height: 68px;
    }

    .shadow-blur {
        font-size: 9px;
        padding: 1px 9px;
        margin-top: 17px;
    }

    .love-icon {
        width: 38px;
        height: 38px;
    }

    .row {
        padding: 4px;
        gap: 4px;
    }

    .time_card {
        padding: 11px;
        min-width: 122px;
        width: calc(50% - 4px);
    }

    .left_info svg {
        width: 15px;
        height: 15px;
    }

    .day_title {
        font-size: 0.68rem;
    }

    .time_m {
        font-size: 0.58rem;
    }

    .baiyi-text {
        font-size: 15px;
    }

    #time-display {
        font-size: 15px;
    }

    #time-display n {
        font-size: 19px;
    }

    #time-display span {
        font-size: 19px;
    }
}

/* 360px 左右媒体查询 */
@media (max-width: 360px) {
    .middle.Blurkg {
        padding: 8px;
    }

    .avatarArea {
        width: 70px;
        height: 70px;
    }

    .shadow-blur {
        font-size: 10px;
        padding: 1px 10px;
        margin-top: 20px;
    }

    .love-icon {
        width: 40px;
        height: 40px;
    }

    .row {
        padding: 6px;
        gap: 6px;
    }

    .time_card {
        padding: 12px;
        min-width: 125px;
        width: calc(50% - 6px);
    }

    .left_info svg {
        width: 16px;
        height: 16px;
    }

    .day_title {
        font-size: 0.7rem;
    }

    .time_m {
        font-size: 0.6rem;
    }

    .baiyi-text {
        font-size: 16px;
    }

    #time-display {
        font-size: 16px;
    }

    #time-display n {
        font-size: 20px;
    }

    #time-display span {
        font-size: 20px;
    }
}

/* 348px 左右媒体查询 */
@media (max-width: 348px) {
    .middle.Blurkg {
        padding: 6px;
    }

    .avatarArea {
        width: 65px;
        height: 65px;
    }

    .shadow-blur {
        font-size: 9px;
        padding: 1px 9px;
        margin-top: 18px;
    }

    .love-icon {
        width: 35px;
        height: 35px;
    }

    .row {
        padding: 6px;
        gap: 6px;
    }

    .time_card {
        padding: 10px;
        min-width: 120px;
        width: calc(50% - 6px);
    }

    .left_info svg {
        width: 14px;
        height: 14px;
    }

    .day_title {
        font-size: 0.65rem;
    }

    .time_m {
        font-size: 0.55rem;
    }

    .baiyi-text {
        font-size: 14px;
    }

    #time-display {
        font-size: 14px;
    }

    #time-display n {
        font-size: 18px;
    }

    #time-display span {
        font-size: 18px;
    }
}

/* 320px 及以下媒体查询 */
@media (max-width: 320px) {
    .middle.Blurkg {
        padding: 5px;
    }

    .avatarArea {
        width: 60px;
        height: 60px;
    }

    .shadow-blur {
        font-size: 8px;
        padding: 1px 8px;
        margin-top: 15px;
    }

    .love-icon {
        width: 30px;
        height: 30px;
    }

    .row {
        padding: 5px;
        gap: 5px;
    }

    .time_card {
        padding: 8px;
        min-width: 110px;
        width: calc(50% - 5px);
    }

    .left_info svg {
        width: 12px;
        height: 12px;
    }

    .day_title {
        font-size: 0.6rem;
    }

    .time_m {
        font-size: 0.5rem;
    }

    .baiyi-text {
        font-size: 12px;
    }

    #time-display {
        font-size: 12px;
    }

    #time-display n {
        font-size: 16px;
    }

    #time-display span {
        font-size: 16px;
    }
}

二.HTML结构

1
2
3
4
5
6
7
8
9
10
11
<div class="bg-wrap central limg"><div class="bg-img"><div class="middle Blurkg"><div class="img-male"><div class="avatarArea"><img draggable="false"class="avatarFrame lazy entered loaded"data-src="/img/sucai/头像挂件.png"style="transform: scale(1.6);top: 2px;left: 2px;"data-ll-status="loaded"src="/img/sucai/头像挂件.png"><img class="aiv_touxiang entered loaded"src="http://q2.qlogo.cn/headimg_dl?dst_uin=2766521276&amp;spec=640"></div><span class="shadow-blur">Qiu.</span></div><div class="love-icon"><img draggable="false"src="/img/sucai/like.svg"></div><div class="img-female"><div class="avatarArea"><img draggable="false"class="avatarFrame lazy entered loaded"data-src="/img/sucai/头像挂件.png"style="transform: scale(1.6);top: 2px;left: 2px;"data-ll-status="loaded"src="/img/sucai/头像挂件.png"><img class="aiv_touxiang entered loaded"src="http://q2.qlogo.cn/headimg_dl?dst_uin=1986315605&amp;spec=640"></div><span class="shadow-blur">Liang</span></div></div></div></div><div class="baiyi-love"><div class="baiyi-text">这是我们一起走过的</div><div id="time-display"></div></div>

<div class="row central"><div class="time_card col-lg-6 col-md-6 col-sm-12 col-sm-x-12 shadow-blur aos-init aos-animate"aos="flip-up"aos-duration="500"><div class="day_cont"><div class="left_info"data-title="周年纪念日"><svg t="1715052607396"style="margin-right:0.5rem!important;"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="9366"width="100"height="100"><path d="M810 249.5c-38.6-38.6-83.5-68.8-133.5-90-51.8-21.9-106.8-33-163.5-33s-111.7 11.1-163.5 33c-50 21.2-94.9 51.4-133.5 90-38.6 38.6-68.8 83.5-90 133.5-21.9 51.8-33 106.8-33 163.5s11.1 111.7 33 163.5c21.2 50 51.4 94.9 90 133.5s83.5 68.8 133.5 90c51.8 21.9 106.8 33 163.5 33s111.7-11.1 163.5-33c50-21.2 94.9-51.4 133.5-90S878.8 760 900 710c21.9-51.8 33-106.8 33-163.5S921.9 434.8 900 383c-21.2-50-51.5-94.9-90-133.5z m-297 657c-198.5 0-360-161.5-360-360s161.5-360 360-360 360 161.5 360 360-161.5 360-360 360zM357 96.5c-42.3-49.6-141-53.3-208.1 4s-77.3 153.9-35 203.5L357 96.5zM877.2 100.5C810 43.2 711.3 47 669 96.5L912.2 304c42.3-49.6 32.1-146.2-35-203.5z"p-id="9367"fill="#ffffff"></path><path d="M667.1 558.6H543V351c0-17.9-14.5-32.4-32.4-32.4-15.2 0-27.6 12.3-27.6 27.6v272.4h182.2c17.1 0 30.9-13.8 30.9-30.9 0-16.1-13-29.1-29-29.1z"p-id="9368"fill="#ffffff"></path></svg><span class="day_title"id="anniversaryTitle">周年纪念日</span></div><div class="time_m"><b class="source"id="anniversaryDate">2024-08-19</b><i class="format"id="countdownDisplay"></i></div></div></div>
	

<div class="time_card col-lg-6 col-md-6 col-sm-12 col-sm-x-12 shadow-blur aos-init aos-animate"aos="flip-up"aos-duration="500"><div class="day_cont"><div class="left_info"data-title="第一次相遇"><svg t="1715052082901"style="margin-right:0.5rem!important;"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="4508"width="100"height="100"><path d="M470.4 204.8l44.8 44.8 44.8-44.8c99.2-99.2 262.4-99.2 361.6 0 48 48 73.6 112 73.6 179.2 0 19.2-12.8 32-32 32s-32-12.8-32-32c0-51.2-19.2-99.2-57.6-134.4-73.6-73.6-195.2-73.6-272 0l-67.2 67.2c-12.8 12.8-32 12.8-44.8 0l-67.2-67.2c-73.6-73.6-195.2-73.6-272 0-73.6 73.6-73.6 195.2 0 272L512 883.2c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L105.6 566.4c-99.2-99.2-99.2-262.4 0-361.6 102.4-102.4 262.4-102.4 364.8 0z m176 710.4L425.6 694.4c-57.6-57.6-57.6-147.2 0-204.8 57.6-57.6 147.2-57.6 204.8 0l57.6 57.6 57.6-57.6c57.6-57.6 147.2-57.6 204.8 0 57.6 57.6 57.6 147.2 0 204.8L729.6 915.2c-9.6 9.6-25.6 16-38.4 16-19.2 0-32-6.4-44.8-16z m256-265.6c32-32 32-83.2 0-112-32-32-83.2-32-112 0l-80 80c-12.8 12.8-32 12.8-44.8 0l-80-80c-32-32-83.2-32-112 0-32 32-32 83.2 0 112L688 864l214.4-214.4z"p-id="4509"fill="#ffffff"></path></svg><span class="day_title"id="firstMeetTitle">相遇的那天</span></div><div class="time_m"><b class="source"id="firstMeetDate">2024-06-30</b><i class="format"id="firstMeetCountdown"></i></div></div></div></div>

<div class="row central">
<div class="time_card col-lg-6 col-md-6 col-sm-12 col-sm-x-12 shadow-blur aos-init aos-animate" aos="flip-up" aos-duration="500"><div class="day_cont"><div class="left_info" data-title="邱总的生日"><svg t="1715052082901" style="margin-right:0.5rem!important;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4508" width="100" height="100"><path d="M470.4 204.8l44.8 44.8 44.8-44.8c99.2-99.2 262.4-99.2 361.6 0 48 48 73.6 112 73.6 179.2 0 19.2-12.8 32-32 32s-32-12.8-32-32c0-51.2-19.2-99.2-57.6-134.4-73.6-73.6-195.2-73.6-272 0l-67.2 67.2c-12.8 12.8-32 12.8-44.8 0l-67.2-67.2c-73.6-73.6-195.2-73.6-272 0-73.6 73.6-73.6 195.2 0 272L512 883.2c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L105.6 566.4c-99.2-99.2-99.2-262.4 0-361.6 102.4-102.4 262.4-102.4 364.8 0z m176 710.4L425.6 694.4c-57.6-57.6-57.6-147.2 0-204.8 57.6-57.6 147.2-57.6 204.8 0l57.6 57.6 57.6-57.6c57.6-57.6 147.2-57.6 204.8 0 57.6 57.6 57.6 147.2 0 204.8L729.6 915.2c-9.6 9.6-25.6 16-38.4 16-19.2 0-32-6.4-44.8-16z m256-265.6c32-32 32-83.2 0-112-32-32-83.2-32-112 0l-80 80c-12.8 12.8-32 12.8-44.8 0l-80-80c-32-32-83.2-32-112 0-32 32-32 83.2 0 112L688 864l214.4-214.4z" p-id="4509" fill="#ffffff"></path></svg><span class="day_title">邱总的生日</span></div><div class="time_m"><b class="source">2004-01-15</b><i class="format"></i></div></div></div>
                                          
<div class="time_card col-lg-6 col-md-6 col-sm-12 col-sm-x-12 shadow-blur aos-init aos-animate"aos="flip-up"aos-duration="500"><div class="day_cont"><div class="left_info"data-title="妍妍的生日"><svg t="1715052082901"style="margin-right:0.5rem!important;"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="4508"width="100"height="100"><path d="M470.4 204.8l44.8 44.8 44.8-44.8c99.2-99.2 262.4-99.2 361.6 0 48 48 73.6 112 73.6 179.2 0 19.2-12.8 32-32 32s-32-12.8-32-32c0-51.2-19.2-99.2-57.6-134.4-73.6-73.6-195.2-73.6-272 0l-67.2 67.2c-12.8 12.8-32 12.8-44.8 0l-67.2-67.2c-73.6-73.6-195.2-73.6-272 0-73.6 73.6-73.6 195.2 0 272L512 883.2c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L105.6 566.4c-99.2-99.2-99.2-262.4 0-361.6 102.4-102.4 262.4-102.4 364.8 0z m176 710.4L425.6 694.4c-57.6-57.6-57.6-147.2 0-204.8 57.6-57.6 147.2-57.6 204.8 0l57.6 57.6 57.6-57.6c57.6-57.6 147.2-57.6 204.8 0 57.6 57.6 57.6 147.2 0 204.8L729.6 915.2c-9.6 9.6-25.6 16-38.4 16-19.2 0-32-6.4-44.8-16z m256-265.6c32-32 32-83.2 0-112-32-32-83.2-32-112 0l-80 80c-12.8 12.8-32 12.8-44.8 0l-80-80c-32-32-83.2-32-112 0-32 32-32 83.2 0 112L688 864l214.4-214.4z"p-id="4509"fill="#ffffff"></path></svg><span class="day_title">妍妍的生日</span></div><div class="time_m"><b class="source">1999-10-04</b><i class="format"></i></div></div></div></div>

三.JavaScript核心

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
// Author：白衣
// 将日期字符串转换为ISO 8601格式
function formatToISO8601(dateStr) {
	var parts = dateStr.split(' ');
	var dateParts = parts[0].split('-');
	var timeParts = parts[1].split(':');
	return dateParts[0] + '-' + (dateParts[1].length === 1 ? '0' : '') + dateParts[1] + '-' + (dateParts[2].length === 1 ? '0' : '') + dateParts[2] + 'T' + timeParts[0] + ':' + timeParts[1] + ':' + timeParts[2];
}

// 设置起始时间
var startDateStr = '2024-8-19 21:34:00';
var startDate = new Date(formatToISO8601(startDateStr));
// 获取时间显示元素
var timeDisplay = document.getElementById('time-display');

// 更新时间显示的函数
function updateTime() {
	// 获取当前时间
	var now = new Date();
	// 计算时间差
	var timeDiff = now - startDate;

	// 计算天数、小时、分钟和秒
	var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
	var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
	var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

	// 格式化时间显示
	timeDisplay.innerHTML = `<n class="num">${days}</n><span class="chinese">天 </span>` +
		`<n class="num">${('0' + hours).slice(-2)}</n><span class="chinese">时 </span>` +
		`<n class="num">${('0' + minutes).slice(-2)}</n><span class="chinese">分 </span>` +
		`<n class="num">${('0' + seconds).slice(-2)}</n><span class="chinese">秒</span>`;
}

// 初始调用更新时间函数
updateTime();
// 每隔1秒调用一次更新时间函数
setInterval(updateTime, 1000);

// 周年纪念日
document.addEventListener('DOMContentLoaded', function() {
	const anniversaryDateElement = document.getElementById('anniversaryDate');
	const countdownElement = document.getElementById('countdownDisplay');
	if (anniversaryDateElement) {
		const anniversaryStr = anniversaryDateElement.textContent;
		const [year, month, day] = anniversaryStr.split('-').map(Number);
		const nextAnniversary = new Date(year + 1, month - 1, day);
		const currentDate = new Date();
		const timeDiff = nextAnniversary - currentDate;
		const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
		countdownElement.textContent = `还有 ${daysDiff} 天`;
	}
});

// 我们相遇的那天
//location.toString().indexOf("baiyi") <= -1? document.location.href = "." : null;
document.addEventListener('DOMContentLoaded', function() {
	const firstMeetDateElement = document.getElementById('firstMeetDate');
	const countdownElement = document.getElementById('firstMeetCountdown');
	if (firstMeetDateElement) {
		const meetDateStr = firstMeetDateElement.textContent;
		const [year, month, day] = meetDateStr.split('-').map(Number);
		const meetDate = new Date(year, month - 1, day);
		const currentDate = new Date();
		const timeDiff = currentDate - meetDate;
		const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
		countdownElement.textContent = `过了 ${daysDiff} 天`;
	}
});


  // 获取所有生日日期元素
        const birthdayElements = document.querySelectorAll('.source');
        // 获取所有显示倒计时的元素
        const countdownElements = document.querySelectorAll('.format');

        // 遍历每个生日日期元素
        birthdayElements.forEach((element, index) => {
            // 获取生日日期字符串
            const birthdayStr = element.textContent;
            // 将生日日期字符串分割成年、月、日
            const [birthYear, birthMonth, birthDay] = birthdayStr.split('-').map(Number);

            // 获取当前日期
            const currentDate = new Date();
            const currentYear = currentDate.getFullYear();
            const currentMonth = currentDate.getMonth() + 1;
            const currentDay = currentDate.getDate();

            // 计算今年的生日日期
            let thisYearBirthday = new Date(currentYear, birthMonth - 1, birthDay);

            // 如果今年的生日已经过了，计算下一年的生日日期
            if (thisYearBirthday < currentDate) {
                thisYearBirthday = new Date(currentYear + 1, birthMonth - 1, birthDay);
            }

            // 计算两个日期之间的时间差（毫秒）
            const timeDiff = thisYearBirthday - currentDate;

            // 将时间差转换为天数
            const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

            // 显示倒计时信息
            countdownElements[index].textContent = `还有${daysDiff}天`;
        });

四.修改相关指引

  • 头像修改
1
<img class="aiv_touxiang entered loaded"src="http://q2.qlogo.cn/headimg_dl?dst_uin=你的QQ号&amp;spec=640">
  • 纪念日修改
1
<b class="source">2004-01-15</b> <!--直接改日期即可-->
  • 一起走过的多少天修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
// Author：白衣
// 将日期字符串转换为ISO 8601格式
function formatToISO8601(dateStr) {
	var parts = dateStr.split(' ');
	var dateParts = parts[0].split('-');
	var timeParts = parts[1].split(':');
	return dateParts[0] + '-' + (dateParts[1].length === 1 ? '0' : '') + dateParts[1] + '-' + (dateParts[2].length === 1 ? '0' : '') + dateParts[2] + 'T' + timeParts[0] + ':' + timeParts[1] + ':' + timeParts[2];
}

// 设置起始时间
var startDateStr = '2024-8-19 21:34:00';
// 这里改成你们在一起的时间
.
.
.
</script>

五.Hexo主题

  • 新建页面
1
hexo new page "love"
  • 修改index.md

把HTML部分复制进去，CSS、JS带标签插入头部和尾部，你也可以引入，随便你。我推荐直接内置插入md文件

下面是内置好了的，复制全部直接插入你的index.md就行了，记得修改相关信息

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
---
title: 情侣空间
date: 2025-03-07 13:08:54
type: love
desc: 情侣纪念日
description: 小手一牵，岁岁年年
---
<style>
.bg-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.bg-img {
    width: 100%;
    position: relative;
}

.middle.Blurkg {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 15px;
}

.img-male {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.avatarArea {
    position: relative;
    width: 120px;
    height: 120px;
}

.avatarFrame {
    width: 100%;
    height: 100%;
    border-radius: 50% !important;
    position: relative;
    z-index: 2;
}

.aiv_touxiang {
    width: 100%;
    height: 100%;
    border-radius: 50% !important;
    max-width: 100% !important;
    border: 1px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: cover;
}

.shadow-blur {
    margin-top: 28px;
    font-size: 16px;
    color: white;
    background-color: rgba(0, 0, 0, 0.93);
    padding: 1px 15px;
    border-radius: 20px;
    display: inline-block;
    text-shadow: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.42);
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.love-icon {
    width: 80px;
    height: 80px;
    animation: heartbeat 1.5s ease-in-out infinite;
}

.img-female {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.baiyi-love {
    text-align: center !important;
}

.baiyi-text {
    font-size: 25px;
}

#time-display {
    text-align: center;
    font-size: 20px;
}

#time-display span {
    font-size: 25px;
}

#time-display n {
    font-size: 30px;
    margin-right: 8px;
    font-weight: 800;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* 减小卡片之间的间距 */
    padding: 10px; /* 减小整体的内边距 */
}

.time_card {
    background-color: #333;
    color: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 20px;
    width: calc(50% - 10px); /* 根据新的间距调整宽度 */
    min-width: 300px;
    transition: transform 0.3s ease;
}

.time_card:hover {
    transform: scale(1.05);
}

.left_info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.left_info svg {
    fill: #ff6b6b;
    width: 30px;
    height: 30px;
}

.day_title {
    font-size: 1.2rem;
    font-weight: bold;
}

.time_m {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
}

.source {
    font-weight: bold;
}

.format {
    color: #ccc;
}

/* 767px 以下媒体查询 */
@media (max-width: 767px) {
    .middle.Blurkg {
        padding: 10px;
    }

    .avatarArea {
        width: 90px;
        height: 90px;
    }

    .shadow-blur {
        font-size: 12px;
    }

    .love-icon {
        width: 50px;
        height: 50px;
        margin-top: -10px;
    }

    .row {
        padding: 8px;
        gap: 8px;
    }

    .time_card {
        padding: 15px;
        min-width: 130px;
        width: calc(50% - 8px);
    }

    .left_info svg {
        width: 20px;
        height: 20px;
    }

    .day_title {
        font-size: 0.8rem;
    }

    .time_m {
        font-size: 0.7rem;
    }

    .baiyi-text {
        font-size: 20px;
    }

    #time-display n {
        font-size: 24px;
    }
}

/* 360 - 380px 媒体查询 */
@media (min-width: 360px) and (max-width: 380px) {
    .middle.Blurkg {
        padding: 7px;
    }

    .avatarArea {
        width: 68px;
        height: 68px;
    }

    .shadow-blur {
        font-size: 9px;
        padding: 1px 9px;
        margin-top: 17px;
    }

    .love-icon {
        width: 38px;
        height: 38px;
    }

    .row {
        padding: 4px;
        gap: 4px;
    }

    .time_card {
        padding: 11px;
        min-width: 122px;
        width: calc(50% - 4px);
    }

    .left_info svg {
        width: 15px;
        height: 15px;
    }

    .day_title {
        font-size: 0.68rem;
    }

    .time_m {
        font-size: 0.58rem;
    }

    .baiyi-text {
        font-size: 15px;
    }

    #time-display {
        font-size: 15px;
    }

    #time-display n {
        font-size: 19px;
    }

    #time-display span {
        font-size: 19px;
    }
}

/* 360px 左右媒体查询 */
@media (max-width: 360px) {
    .middle.Blurkg {
        padding: 8px;
    }

    .avatarArea {
        width: 70px;
        height: 70px;
    }

    .shadow-blur {
        font-size: 10px;
        padding: 1px 10px;
        margin-top: 20px;
    }

    .love-icon {
        width: 40px;
        height: 40px;
    }

    .row {
        padding: 6px;
        gap: 6px;
    }

    .time_card {
        padding: 12px;
        min-width: 125px;
        width: calc(50% - 6px);
    }

    .left_info svg {
        width: 16px;
        height: 16px;
    }

    .day_title {
        font-size: 0.7rem;
    }

    .time_m {
        font-size: 0.6rem;
    }

    .baiyi-text {
        font-size: 16px;
    }

    #time-display {
        font-size: 16px;
    }

    #time-display n {
        font-size: 20px;
    }

    #time-display span {
        font-size: 20px;
    }
}

/* 348px 左右媒体查询 */
@media (max-width: 348px) {
    .middle.Blurkg {
        padding: 6px;
    }

    .avatarArea {
        width: 65px;
        height: 65px;
    }

    .shadow-blur {
        font-size: 9px;
        padding: 1px 9px;
        margin-top: 18px;
    }

    .love-icon {
        width: 35px;
        height: 35px;
    }

    .row {
        padding: 6px;
        gap: 6px;
    }

    .time_card {
        padding: 10px;
        min-width: 120px;
        width: calc(50% - 6px);
    }

    .left_info svg {
        width: 14px;
        height: 14px;
    }

    .day_title {
        font-size: 0.65rem;
    }

    .time_m {
        font-size: 0.55rem;
    }

    .baiyi-text {
        font-size: 14px;
    }

    #time-display {
        font-size: 14px;
    }

    #time-display n {
        font-size: 18px;
    }

    #time-display span {
        font-size: 18px;
    }
}

/* 320px 及以下媒体查询 */
@media (max-width: 320px) {
    .middle.Blurkg {
        padding: 5px;
    }

    .avatarArea {
        width: 60px;
        height: 60px;
    }

    .shadow-blur {
        font-size: 8px;
        padding: 1px 8px;
        margin-top: 15px;
    }

    .love-icon {
        width: 30px;
        height: 30px;
    }

    .row {
        padding: 5px;
        gap: 5px;
    }

    .time_card {
        padding: 8px;
        min-width: 110px;
        width: calc(50% - 5px);
    }

    .left_info svg {
        width: 12px;
        height: 12px;
    }

    .day_title {
        font-size: 0.6rem;
    }

    .time_m {
        font-size: 0.5rem;
    }

    .baiyi-text {
        font-size: 12px;
    }

    #time-display {
        font-size: 12px;
    }

    #time-display n {
        font-size: 16px;
    }

    #time-display span {
        font-size: 16px;
    }
}
</style>

<div class="bg-wrap central limg"><div class="bg-img"><div class="middle Blurkg"><div class="img-male"><div class="avatarArea"><img draggable="false"class="avatarFrame lazy entered loaded"data-src="/img/sucai/头像挂件.png"style="transform: scale(1.6);top: 2px;left: 2px;"data-ll-status="loaded"src="/img/sucai/头像挂件.png"><img class="aiv_touxiang entered loaded"src="http://q2.qlogo.cn/headimg_dl?dst_uin=2766521276&amp;spec=640"></div><span class="shadow-blur">Qiu.</span></div><div class="love-icon"><img draggable="false"src="/img/sucai/like.svg"></div><div class="img-female"><div class="avatarArea"><img draggable="false"class="avatarFrame lazy entered loaded"data-src="/img/sucai/头像挂件.png"style="transform: scale(1.6);top: 2px;left: 2px;"data-ll-status="loaded"src="/img/sucai/头像挂件.png"><img class="aiv_touxiang entered loaded"src="http://q2.qlogo.cn/headimg_dl?dst_uin=1986315605&amp;spec=640"></div><span class="shadow-blur">Liang</span></div></div></div></div><div class="baiyi-love"><div class="baiyi-text">这是我们一起走过的</div><div id="time-display"></div></div>

<div class="row central"><div class="time_card col-lg-6 col-md-6 col-sm-12 col-sm-x-12 shadow-blur aos-init aos-animate"aos="flip-up"aos-duration="500"><div class="day_cont"><div class="left_info"data-title="周年纪念日"><svg t="1715052607396"style="margin-right:0.5rem!important;"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="9366"width="100"height="100"><path d="M810 249.5c-38.6-38.6-83.5-68.8-133.5-90-51.8-21.9-106.8-33-163.5-33s-111.7 11.1-163.5 33c-50 21.2-94.9 51.4-133.5 90-38.6 38.6-68.8 83.5-90 133.5-21.9 51.8-33 106.8-33 163.5s11.1 111.7 33 163.5c21.2 50 51.4 94.9 90 133.5s83.5 68.8 133.5 90c51.8 21.9 106.8 33 163.5 33s111.7-11.1 163.5-33c50-21.2 94.9-51.4 133.5-90S878.8 760 900 710c21.9-51.8 33-106.8 33-163.5S921.9 434.8 900 383c-21.2-50-51.5-94.9-90-133.5z m-297 657c-198.5 0-360-161.5-360-360s161.5-360 360-360 360 161.5 360 360-161.5 360-360 360zM357 96.5c-42.3-49.6-141-53.3-208.1 4s-77.3 153.9-35 203.5L357 96.5zM877.2 100.5C810 43.2 711.3 47 669 96.5L912.2 304c42.3-49.6 32.1-146.2-35-203.5z"p-id="9367"fill="#ffffff"></path><path d="M667.1 558.6H543V351c0-17.9-14.5-32.4-32.4-32.4-15.2 0-27.6 12.3-27.6 27.6v272.4h182.2c17.1 0 30.9-13.8 30.9-30.9 0-16.1-13-29.1-29-29.1z"p-id="9368"fill="#ffffff"></path></svg><span class="day_title"id="anniversaryTitle">周年纪念日</span></div><div class="time_m"><b class="source"id="anniversaryDate">2024-08-19</b><i class="format"id="countdownDisplay"></i></div></div></div>
	

<div class="time_card col-lg-6 col-md-6 col-sm-12 col-sm-x-12 shadow-blur aos-init aos-animate"aos="flip-up"aos-duration="500"><div class="day_cont"><div class="left_info"data-title="第一次相遇"><svg t="1715052082901"style="margin-right:0.5rem!important;"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="4508"width="100"height="100"><path d="M470.4 204.8l44.8 44.8 44.8-44.8c99.2-99.2 262.4-99.2 361.6 0 48 48 73.6 112 73.6 179.2 0 19.2-12.8 32-32 32s-32-12.8-32-32c0-51.2-19.2-99.2-57.6-134.4-73.6-73.6-195.2-73.6-272 0l-67.2 67.2c-12.8 12.8-32 12.8-44.8 0l-67.2-67.2c-73.6-73.6-195.2-73.6-272 0-73.6 73.6-73.6 195.2 0 272L512 883.2c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L105.6 566.4c-99.2-99.2-99.2-262.4 0-361.6 102.4-102.4 262.4-102.4 364.8 0z m176 710.4L425.6 694.4c-57.6-57.6-57.6-147.2 0-204.8 57.6-57.6 147.2-57.6 204.8 0l57.6 57.6 57.6-57.6c57.6-57.6 147.2-57.6 204.8 0 57.6 57.6 57.6 147.2 0 204.8L729.6 915.2c-9.6 9.6-25.6 16-38.4 16-19.2 0-32-6.4-44.8-16z m256-265.6c32-32 32-83.2 0-112-32-32-83.2-32-112 0l-80 80c-12.8 12.8-32 12.8-44.8 0l-80-80c-32-32-83.2-32-112 0-32 32-32 83.2 0 112L688 864l214.4-214.4z"p-id="4509"fill="#ffffff"></path></svg><span class="day_title"id="firstMeetTitle">相遇的那天</span></div><div class="time_m"><b class="source"id="firstMeetDate">2024-06-30</b><i class="format"id="firstMeetCountdown"></i></div></div></div></div>

<div class="row central">
<div class="time_card col-lg-6 col-md-6 col-sm-12 col-sm-x-12 shadow-blur aos-init aos-animate" aos="flip-up" aos-duration="500"><div class="day_cont"><div class="left_info" data-title="邱总的生日"><svg t="1715052082901" style="margin-right:0.5rem!important;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4508" width="100" height="100"><path d="M470.4 204.8l44.8 44.8 44.8-44.8c99.2-99.2 262.4-99.2 361.6 0 48 48 73.6 112 73.6 179.2 0 19.2-12.8 32-32 32s-32-12.8-32-32c0-51.2-19.2-99.2-57.6-134.4-73.6-73.6-195.2-73.6-272 0l-67.2 67.2c-12.8 12.8-32 12.8-44.8 0l-67.2-67.2c-73.6-73.6-195.2-73.6-272 0-73.6 73.6-73.6 195.2 0 272L512 883.2c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L105.6 566.4c-99.2-99.2-99.2-262.4 0-361.6 102.4-102.4 262.4-102.4 364.8 0z m176 710.4L425.6 694.4c-57.6-57.6-57.6-147.2 0-204.8 57.6-57.6 147.2-57.6 204.8 0l57.6 57.6 57.6-57.6c57.6-57.6 147.2-57.6 204.8 0 57.6 57.6 57.6 147.2 0 204.8L729.6 915.2c-9.6 9.6-25.6 16-38.4 16-19.2 0-32-6.4-44.8-16z m256-265.6c32-32 32-83.2 0-112-32-32-83.2-32-112 0l-80 80c-12.8 12.8-32 12.8-44.8 0l-80-80c-32-32-83.2-32-112 0-32 32-32 83.2 0 112L688 864l214.4-214.4z" p-id="4509" fill="#ffffff"></path></svg><span class="day_title">邱总的生日</span></div><div class="time_m"><b class="source">2004-01-15</b><i class="format"></i></div></div></div>
                                          
<div class="time_card col-lg-6 col-md-6 col-sm-12 col-sm-x-12 shadow-blur aos-init aos-animate"aos="flip-up"aos-duration="500"><div class="day_cont"><div class="left_info"data-title="妍妍的生日"><svg t="1715052082901"style="margin-right:0.5rem!important;"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="4508"width="100"height="100"><path d="M470.4 204.8l44.8 44.8 44.8-44.8c99.2-99.2 262.4-99.2 361.6 0 48 48 73.6 112 73.6 179.2 0 19.2-12.8 32-32 32s-32-12.8-32-32c0-51.2-19.2-99.2-57.6-134.4-73.6-73.6-195.2-73.6-272 0l-67.2 67.2c-12.8 12.8-32 12.8-44.8 0l-67.2-67.2c-73.6-73.6-195.2-73.6-272 0-73.6 73.6-73.6 195.2 0 272L512 883.2c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L105.6 566.4c-99.2-99.2-99.2-262.4 0-361.6 102.4-102.4 262.4-102.4 364.8 0z m176 710.4L425.6 694.4c-57.6-57.6-57.6-147.2 0-204.8 57.6-57.6 147.2-57.6 204.8 0l57.6 57.6 57.6-57.6c57.6-57.6 147.2-57.6 204.8 0 57.6 57.6 57.6 147.2 0 204.8L729.6 915.2c-9.6 9.6-25.6 16-38.4 16-19.2 0-32-6.4-44.8-16z m256-265.6c32-32 32-83.2 0-112-32-32-83.2-32-112 0l-80 80c-12.8 12.8-32 12.8-44.8 0l-80-80c-32-32-83.2-32-112 0-32 32-32 83.2 0 112L688 864l214.4-214.4z"p-id="4509"fill="#ffffff"></path></svg><span class="day_title">妍妍的生日</span></div><div class="time_m"><b class="source">1999-10-04</b><i class="format"></i></div></div></div></div>

<script>
// Author：白衣
// 将日期字符串转换为ISO 8601格式
function formatToISO8601(dateStr) {
	var parts = dateStr.split(' ');
	var dateParts = parts[0].split('-');
	var timeParts = parts[1].split(':');
	return dateParts[0] + '-' + (dateParts[1].length === 1 ? '0' : '') + dateParts[1] + '-' + (dateParts[2].length === 1 ? '0' : '') + dateParts[2] + 'T' + timeParts[0] + ':' + timeParts[1] + ':' + timeParts[2];
}

// 设置起始时间
var startDateStr = '2024-8-19 21:34:00';
var startDate = new Date(formatToISO8601(startDateStr));
// 获取时间显示元素
var timeDisplay = document.getElementById('time-display');

// 更新时间显示的函数
function updateTime() {
	// 获取当前时间
	var now = new Date();
	// 计算时间差
	var timeDiff = now - startDate;

	// 计算天数、小时、分钟和秒
	var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
	var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
	var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

	// 格式化时间显示
	timeDisplay.innerHTML = `<n class="num">${days}</n><span class="chinese">天 </span>` +
		`<n class="num">${('0' + hours).slice(-2)}</n><span class="chinese">时 </span>` +
		`<n class="num">${('0' + minutes).slice(-2)}</n><span class="chinese">分 </span>` +
		`<n class="num">${('0' + seconds).slice(-2)}</n><span class="chinese">秒</span>`;
}

// 初始调用更新时间函数
updateTime();
// 每隔1秒调用一次更新时间函数
setInterval(updateTime, 1000);

// 周年纪念日
document.addEventListener('DOMContentLoaded', function() {
	const anniversaryDateElement = document.getElementById('anniversaryDate');
	const countdownElement = document.getElementById('countdownDisplay');
	if (anniversaryDateElement) {
		const anniversaryStr = anniversaryDateElement.textContent;
		const [year, month, day] = anniversaryStr.split('-').map(Number);
		const nextAnniversary = new Date(year + 1, month - 1, day);
		const currentDate = new Date();
		const timeDiff = nextAnniversary - currentDate;
		const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
		countdownElement.textContent = `还有 ${daysDiff} 天`;
	}
});

// 我们相遇的那天
//location.toString().indexOf("baiyi") <= -1? document.location.href = "." : null;
document.addEventListener('DOMContentLoaded', function() {
	const firstMeetDateElement = document.getElementById('firstMeetDate');
	const countdownElement = document.getElementById('firstMeetCountdown');
	if (firstMeetDateElement) {
		const meetDateStr = firstMeetDateElement.textContent;
		const [year, month, day] = meetDateStr.split('-').map(Number);
		const meetDate = new Date(year, month - 1, day);
		const currentDate = new Date();
		const timeDiff = currentDate - meetDate;
		const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
		countdownElement.textContent = `过了 ${daysDiff} 天`;
	}
});


  // 获取所有生日日期元素
        const birthdayElements = document.querySelectorAll('.source');
        // 获取所有显示倒计时的元素
        const countdownElements = document.querySelectorAll('.format');

        // 遍历每个生日日期元素
        birthdayElements.forEach((element, index) => {
            // 获取生日日期字符串
            const birthdayStr = element.textContent;
            // 将生日日期字符串分割成年、月、日
            const [birthYear, birthMonth, birthDay] = birthdayStr.split('-').map(Number);

            // 获取当前日期
            const currentDate = new Date();
            const currentYear = currentDate.getFullYear();
            const currentMonth = currentDate.getMonth() + 1;
            const currentDay = currentDate.getDate();

            // 计算今年的生日日期
            let thisYearBirthday = new Date(currentYear, birthMonth - 1, birthDay);

            // 如果今年的生日已经过了，计算下一年的生日日期
            if (thisYearBirthday < currentDate) {
                thisYearBirthday = new Date(currentYear + 1, birthMonth - 1, birthDay);
            }

            // 计算两个日期之间的时间差（毫秒）
            const timeDiff = thisYearBirthday - currentDate;

            // 将时间差转换为天数
            const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

            // 显示倒计时信息
            countdownElements[index].textContent = `还有${daysDiff}天`;
        });
    </script>