114 lines
4.9 KiB
HTML
114 lines
4.9 KiB
HTML
<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>
|