update: 2026-03-28 20:59

InfoGenie-frontend/public/toolbox/网页小玩具/人生倒计时/人生倒计时.html

@@ -0,0 +1,113 @@
+<div id="life-countdown" style="border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
+  <h3 class="colorful-text" style="text-align: center;">人生倒计时</h3>
+  <div class="countdown-section" style="margin: 10px 0;">
+    <div class="countdown-text" style="color: red;">今天已过去 <span id="hours-today"></span> 小时</div>
+    <div class="progress-bar" style="background: #ddd; border-radius: 10px; overflow: hidden;">
+      <div id="bar-today" class="progress" style="background: #f39c12;"></div>
+    </div>
+  </div>
+  <div class="countdown-section" style="margin: 10px 0;">
+    <div class="countdown-text" style="color: orange;">本周已过去 <span id="days-week"></span> 天</div>
+    <div class="progress-bar" style="background: #ddd; border-radius: 10px; overflow: hidden;">
+      <div id="bar-week" class="progress" style="background: #3498db;"></div>
+    </div>
+  </div>
+  <div class="countdown-section" style="margin: 10px 0;">
+    <div class="countdown-text" style="color: yellow;">本月已过去 <span id="days-month"></span> 天</div>
+    <div class="progress-bar" style="background: #ddd; border-radius: 10px; overflow: hidden;">
+      <div id="bar-month" class="progress" style="background: #2ecc71;"></div>
+    </div>
+  </div>
+  <div class="countdown-section" style="margin: 10px 0;">
+    <div class="countdown-text" style="color: green;">今年已过去 <span id="days-year"></span> 天</div>
+    <div class="progress-bar" style="background: #ddd; border-radius: 10px; overflow: hidden;">
+      <div id="bar-year" class="progress" style="background: #9b59b6;"></div>
+    </div>
+  </div>
+  <div class="countdown-section" style="margin: 10px 0;">
+    <div class="countdown-text" style="color: blue;">距离春节还有 <span id="days-chunjie"></span> 天</div>
+    <div class="progress-bar" style="background: #ddd; border-radius: 10px; overflow: hidden;">
+      <div id="bar-chunjie" class="progress" style="background: #2980b9;"></div>
+    </div>
+  </div>
+  <div class="countdown-section" style="margin: 10px 0;">
+    <div class="countdown-text" style="color: purple;">距离我的生日还有 <span id="days-birthday"></span> 天</div>
+    <div class="progress-bar" style="background: #ddd; border-radius: 10px; overflow: hidden;">
+      <div id="bar-birthday" class="progress" style="background: #e74c3c;"></div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .colorful-text {
+    font-size: 28px;
+    font-weight: bold;
+    color: #ff6347; /* 可以根据需要调整颜色 */
+  }
+
+  .countdown-text {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .progress {
+    height: 20px;
+    transition: width 1s ease-in-out;
+  }
+
+  .progress-bar {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+</style>
+
+<script>
+  function updateCountdown() {
+    const now = new Date();
+
+    // 今天已过去的小时数
+    const hoursToday = now.getHours();
+    document.getElementById('hours-today').innerText = hoursToday;
+    document.getElementById('bar-today').style.width = (hoursToday / 24 * 100) + '%';
+
+    // 本周已过去的天数
+    const daysWeek = now.getDay();
+    document.getElementById('days-week').innerText = daysWeek;
+    document.getElementById('bar-week').style.width = (daysWeek / 7 * 100) + '%';
+
+    // 本月已过去的天数
+    const daysMonth = now.getDate();
+    const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
+    document.getElementById('days-month').innerText = daysMonth;
+    document.getElementById('bar-month').style.width = (daysMonth / daysInMonth * 100) + '%';
+
+    // 今年已过去的天数
+    const start = new Date(now.getFullYear(), 0, 0);
+    const diff = now - start;
+    const oneDay = 1000 * 60 * 60 * 24;
+    const daysYear = Math.floor(diff / oneDay);
+    document.getElementById('days-year').innerText = daysYear;
+    document.getElementById('bar-year').style.width = (daysYear / 365 * 100) + '%';
+
+    // 离春节还有多少天（2025年1月29日）
+    const chunjieDate = new Date(2025, 0, 29); // 春节日期假设为2025年1月29日
+    const diffChunjie = chunjieDate - now;
+    const daysChunjie = Math.floor(diffChunjie / oneDay);
+    document.getElementById('days-chunjie').innerText = daysChunjie;
+    document.getElementById('bar-chunjie').style.width = ((365 - daysChunjie) / 365 * 100) + '%';
+
+    // 离生日还有多少天（每年的10月25日）
+    let birthdayDate = new Date(now.getFullYear(), 9, 25);
+    if (now > birthdayDate) {
+      birthdayDate = new Date(now.getFullYear() + 1, 9, 25);
+    }
+    const diffBirthday = birthdayDate - now;
+    const daysBirthday = Math.floor(diffBirthday / (1000 * 60 * 60 * 24));
+    document.getElementById('days-birthday').innerText = daysBirthday;
+    document.getElementById('bar-birthday').style.width = ((365 - daysBirthday) / 365 * 100) + '%';
+  }
+
+  updateCountdown();
+  setInterval(updateCountdown, 3600000); // 每小时更新一次
+</script>