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>
emlog侧边栏时间倒计时html代码

效果截图

HTML代码

相关文章

发表评论

时间管理

热门文章

标签

存档
