子比美化 – 时间进度胶囊小工具

演示效果

<div class="zbfox-time-progress blue">
    <div class="progress-warp">
        <div class="progress-progress" id="progress-bar" style="width:0%;"></div>
        <div class="progress-text" id="progress-text">0%</div>
    </div>
    <div class="progress-note">
        <div class="progress-time-title" id="progress-time-title">1月</div>
        <div class="progress-time-sub-title" id="progress-time-sub-title">已过0天</div>
    </div>
</div>
<style>
    .progress-text {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .zbfox-time-progress {
        background: #2e8fff;
        border-radius: 15px;
        padding: 10px;
        margin-bottom: 20px;
        color: #fff;
        display: flex;
        gap: 10px;
        justify-content: space-between;
    }

    .zbfox-time-progress .progress-warp {
        flex: 1;
        background: #96bdf7;
        border-radius: 15px;
        overflow: hidden;
        position: relative;
    }

    .zbfox-time-progress .progress-warp .progress-progress {
        background: #fff;
        height: 100%;
    }

    .zbfox-time-progress .progress-warp .progress-text {
        position: absolute;
        font-size: 25px;
        font-weight: 600;
        color: #2e8fff;
        left: 50%;
        top: 50%;
    }

    .zbfox-time-progress .progress-note {
        padding: 5px 10px;
    }

    .zbfox-time-progress .progress-note .progress-time-title {
        font-size: 20px;
        font-weight: 600;
    }

    .zbfox-time-progress .progress-note .progress-time-sub-title {
        font-size: 12px;
    }
</style>
<script> const now = new Date(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth(); const currentDay = now.getDate(); const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); const daysPassed = currentDay; const progress = (daysPassed / daysInMonth) * 100; document.getElementById("progress-bar").style.width = `${progress}%`; document.getElementById("progress-text").innerText = `${Math.round(progress)}%`; const monthNames = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; document.getElementById("progress-time-title").innerText = monthNames[currentMonth]; document.getElementById("progress-time-sub-title").innerText = `已过${daysPassed}天`; </script>