-
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> -
