admin 发表于 4 天前

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

2025三八妇女节倒计时html代码
https://bbs.cnzv.cc/mpv.php/up-3872-1739797267.html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三八妇女节倒计时</title>
    <style>
      body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* 设置背景颜色为淡粉色，营造节日氛围 */
            background-color: #ffe4e1;
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
            height: 100vh;
            margin: 0;
      }

       .countdown-container {
            text-align: center;
            background-color: white;
            padding: 40px;
            border-radius: 10px;
            /* 添加阴影效果 */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      }

       .countdown-title {
            font-size: 36px;
            color: #ff69b4;
            margin-bottom: 20px;
      }

       .countdown-timer {
            font-size: 48px;
            color: #333;
      }
    </style>
</head>

<body>
    <div class="countdown-container">
      <!-- 倒计时标题 -->
      <h1 class="countdown-title">距离三八妇女节还有：</h1>
      <!-- 显示倒计时的元素 -->
      <div class="countdown-timer" id="countdown"></div>
    </div>

    <script>
      function updateCountdown() {
            // 获取当前年份
            const currentYear = new Date().getFullYear();
            // 创建三八妇女节的日期对象，3 月 8 日
            const womenDay = new Date(currentYear, 2, 8);
            // 如果当前日期已经过了今年的三八妇女节，则计算下一年的
            if (new Date() > womenDay) {
                womenDay.setFullYear(currentYear + 1);
            }
            // 获取当前时间
            const now = new Date().getTime();
            // 计算距离三八妇女节的时间差（毫秒）
            const distance = womenDay - now;

            // 计算剩余的天数
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            // 计算剩余的小时数
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            // 计算剩余的分钟数
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            // 计算剩余的秒数
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // 获取显示倒计时的元素
            const countdownElement = document.getElementById('countdown');
            // 将倒计时信息显示在页面上
            countdownElement.innerHTML = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;

            // 如果倒计时结束
            if (distance < 0) {
                clearInterval(x);
                countdownElement.innerHTML = "三八妇女节快乐！";
            }
      }

      // 每秒更新一次倒计时
      const x = setInterval(updateCountdown, 1000);
      // 页面加载时立即更新一次倒计时
      updateCountdown();
    </script>
</body>

</html>


klxf 发表于 3 天前

哇，时间过得真快，谢谢管理员的2025三八妇女节倒计时html代码分享:)
页: [1]
查看完整版本: 2025三八妇女节倒计时html代码