温馨提示：本文最后更新于2025年3月14日 12:24，若内容或图片失效，请在下方留言或联系博主。
emlog侧边栏时间倒计时html代码
效果截图
HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>时间进度侧边栏</title>
<style>
:root {
--sidebar-bg: #f5f7fa;
--text-primary: #2c3e50;
--progress-bg: #e0e0e0;
--progress-fill: #3498db;
}
.j-date {
width: 280px;
padding: 20px;
background: var(--sidebar-bg);
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
font-family: 'Segoe UI', system-ui;
}
.progress-item {
margin: 18px 0;
}
.progress-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 6px;
}
.progress-text {
font-size: 0.9em;
color: #666;
margin-bottom: 8px;
}
.progress-bar {
height: 8px;
background: var(--progress-bg);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--progress-fill);
border-radius: 4px;
transition: width 0.5s ease;
}
.progress-percent {
float: right;
font-size: 0.85em;
color: #7f8c8d;
}
/* 新增底部时间样式 */
.time-footer {
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid #eee;
text-align: center;
font-size: 0.95em;
}
#current-time {
color: var(--text-primary);
font-weight: 500;
}
#current-time span {
color: #e74c3c;
letter-spacing: 0.5px;
}
</style>
</head>
<body>
<!-- 原有进度条模块 -->
<div class="progress-item">
<div class="progress-title">本周进度</div>
<div class="progress-text" id="week-text"></div>
<div class="progress-bar">
<div class="progress-fill" id="week-progress"></div>
</div>
<span class="progress-percent" id="week-percent"></span>
</div>
<div class="progress-item">
<div class="progress-title">本月进度</div>
<div class="progress-text" id="month-text"></div>
<div class="progress-bar">
<div class="progress-fill" id="month-progress"></div>
</div>
<span class="progress-percent" id="month-percent"></span>
</div>
<div class="progress-item">
<div class="progress-title">本年进度</div>
<div class="progress-text" id="year-text"></div>
<div class="progress-bar">
<div class="progress-fill" id="year-progress"></div>
</div>
<span class="progress-percent" id="year-percent"></span>
</div>
<div class="progress-item">
<div class="progress-title">今日进度</div>
<div class="progress-text" id="day-text"></div>
<div class="progress-bar">
<div class="progress-fill" id="day-progress"></div>
</div>
<span class="progress-percent" id="day-percent"></span>
</div>
<!-- 新增底部时间模块 -->
<div class="time-footer">
<div id="current-time"></div>
</div>
<script>
// 时间格式化函数
function formatTime(date) {
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
}).replace(/\//g, '月').replace('日', '号').replace(' ', ' ');
}
// 修正后的周进度计算
function calculateWeekProgress(now) {
const tempDate = new Date(now);
const day = tempDate.getDay();
const diffToMonday = day === 0 ? 6 : day - 1;
const monday = new Date(tempDate);
monday.setDate(tempDate.getDate() - diffToMonday);
monday.setHours(0, 0, 0, 0);
const nextMonday = new Date(monday);
nextMonday.setDate(monday.getDate() + 7);
return (now - monday) / (nextMonday - monday);
}
function updateProgress() {
const now = new Date();
// 更新时间显示
document.getElementById('current-time').innerHTML =
`当前时间：<span>${formatTime(now)}</span>`;
// 进度计算
const weekProgress = calculateWeekProgress(now);
const monthDays = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
const monthProgress = (now.getDate() - 1 + now.getHours() / 24) / monthDays;
const yearStart = new Date(now.getFullYear(), 0, 1);
const yearEnd = new Date(now.getFullYear() + 1, 0, 1);
const yearProgress = (now - yearStart) / (yearEnd - yearStart);
const dayProgress = (now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds()) / 86400;
// 更新进度条
updateElement('week', weekProgress, Math.floor(weekProgress * 7), 7 - Math.floor(weekProgress * 7));
updateElement('month', monthProgress, now.getDate(), monthDays - now.getDate());
updateElement('year', yearProgress, Math.ceil(yearProgress * 365), 365 - Math.ceil(yearProgress * 365));
updateElement('day', dayProgress, now.getHours(), 24 - now.getHours());
}
function updateElement(type, progress, passed, remaining) {
document.getElementById(`${type}-text`).textContent =
`已过去 ${passed} ${type === 'day' ? '小时' : '天'}，剩余 ${remaining} ${type === 'day' ? '小时' : '天'}`;
document.getElementById(`${type}-progress`).style.width =
`${Math.min(100, (progress * 100).toFixed(2))}%`;
document.getElementById(`${type}-percent`).textContent =
`${(progress * 100).toFixed(1)}%`;
}
// 每秒更新
setInterval(updateProgress, 1000);
updateProgress();
</script>
</body>
</html>