2025三八妇女节倒计时html代码

admin

2025三八妇女节倒计时html代码

1. <!DOCTYPE html>
   
2. <html lang="zh-CN">
   
3. 
   
4. <head>
   
5.     <meta charset="UTF-8">
   
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
7.     <title>三八妇女节倒计时</title>
   
8.     <style>
   
9.         body {
   
10.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
11.             /* 设置背景颜色为淡粉色，营造节日氛围 */
    
12.             background-color: #ffe4e1;
    
13.             display: flex;
    
14.             /* 水平居中 */
    
15.             justify-content: center;
    
16.             /* 垂直居中 */
    
17.             align-items: center;
    
18.             height: 100vh;
    
19.             margin: 0;
    
20.         }
    
21. 
    
22.        .countdown-container {
    
23.             text-align: center;
    
24.             background-color: white;
    
25.             padding: 40px;
    
26.             border-radius: 10px;
    
27.             /* 添加阴影效果 */
    
28.             box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    
29.         }
    
30. 
    
31.        .countdown-title {
    
32.             font-size: 36px;
    
33.             color: #ff69b4;
    
34.             margin-bottom: 20px;
    
35.         }
    
36. 
    
37.        .countdown-timer {
    
38.             font-size: 48px;
    
39.             color: #333;
    
40.         }
    
41.     </style>
    
42. </head>
    
43. 
    
44. <body>
    
45.     <div class="countdown-container">
    
46.         <!-- 倒计时标题 -->
    
47.         <h1 class="countdown-title">距离三八妇女节还有：</h1>
    
48.         <!-- 显示倒计时的元素 -->
    
49.         <div class="countdown-timer" id="countdown"></div>
    
50.     </div>
    
51. 
    
52.     <script>
    
53.         function updateCountdown() {
    
54.             // 获取当前年份
    
55.             const currentYear = new Date().getFullYear();
    
56.             // 创建三八妇女节的日期对象，3 月 8 日
    
57.             const womenDay = new Date(currentYear, 2, 8);
    
58.             // 如果当前日期已经过了今年的三八妇女节，则计算下一年的
    
59.             if (new Date() > womenDay) {
    
60.                 womenDay.setFullYear(currentYear + 1);
    
61.             }
    
62.             // 获取当前时间
    
63.             const now = new Date().getTime();
    
64.             // 计算距离三八妇女节的时间差（毫秒）
    
65.             const distance = womenDay - now;
    
66. 
    
67.             // 计算剩余的天数
    
68.             const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    
69.             // 计算剩余的小时数
    
70.             const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    
71.             // 计算剩余的分钟数
    
72.             const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    
73.             // 计算剩余的秒数
    
74.             const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
75. 
    
76.             // 获取显示倒计时的元素
    
77.             const countdownElement = document.getElementById('countdown');
    
78.             // 将倒计时信息显示在页面上
    
79.             countdownElement.innerHTML = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
    
80. 
    
81.             // 如果倒计时结束
    
82.             if (distance < 0) {
    
83.                 clearInterval(x);
    
84.                 countdownElement.innerHTML = "三八妇女节快乐！";
    
85.             }
    
86.         }
    
87. 
    
88.         // 每秒更新一次倒计时
    
89.         const x = setInterval(updateCountdown, 1000);
    
90.         // 页面加载时立即更新一次倒计时
    
91.         updateCountdown();
    
92.     </script>
    
93. </body>
    
94. 
    
95. </html>

复制代码

klxf

哇，时间过得真快，谢谢管理员的2025三八妇女节倒计时html代码分享

蓝叶

感谢分享，带来满满元气

秋思梦景

感谢分享，解决我的难题啦哟

mewomen

支持博主，分享太精彩咯

heimeigui

感谢分享，充满生活情趣哟

huakaibanxia

感谢分享，解决我的困惑

abc8831nc

支持佳作，期待更多分享哟

zhongshishenti

赞，顶帖真的超有水平