WordPress主题美化 药丸时间进度小工具

WordPress药丸时间进度小工具是我在Lovestu主题看到的小工具，其样式非常好看，所以我就研究研究给扒了过来，代码其实很简单，他可以根据已经经过的天数来计算百分比。

首先在侧栏添加html：

<pre class="pure-highlightjs"><code class="php"><div class="zbfox-time-progress blue theme-box"><div class="progress-warp"><div class="progress-progress" id="progress-bar"></div><div class="progress-text" id="progress-text">%</div></div><div class="progress-note"><div class="progress-time-title" id="progress-time-title">月</div><div class="progress-time-sub-title" id="progress-time-sub-title">天</div></div></div><div class="zib-widget ">
        <div class="textwidget">
            <script type="text/javascript">
                function getRTime(){
                    var EndTime= new Date('2025/01/01 00:00:00'); //截止时间
                    var NowTime = new Date();
                    var t =EndTime.getTime() - NowTime.getTime();
                    var d=Math.floor(t/1000/60/60/24);
                    var h=Math.floor(t/1000/60/60%24);
                    var m=Math.floor(t/1000/60%60);
                    var s=Math.floor(t/1000%60);
                    document.getElementById("t_d").innerHTML = d + " 天";
                    document.getElementById("t_h").innerHTML = h + " 时";
                    document.getElementById("t_m").innerHTML = m + " 分";
                    document.getElementById("t_s").innerHTML = s + " 秒";
                }
                setInterval(getRTime,1000);
            </script>
</code></pre>

添加js：

<pre class="pure-highlightjs"><code class="javascript">  function updateProgressBar() {
        // 获取当前日期
        const today = new Date();
        const year = today.getFullYear();
        const month = today.getMonth() + 1; // 月份从0开始，所以需要加1
        const daysInMonth = new Date(year, month, 0).getDate(); // 获取当前月份的天数
        const daysPassed = today.getDate(); // 获取当前日期的天数

        // 计算百分比
        const percentage = (daysPassed / daysInMonth) * 100;

        // 更新进度条的宽度
        document.getElementById('progress-bar').style.width = percentage + '%';

        // 更新进度文本
        document.getElementById('progress-text').textContent = Math.round(percentage) + '%';

        // 更新月份和已过天数
        document.getElementById('progress-time-title').textContent = month + '月';
        // 更新已过天数
        document.getElementById('progress-time-sub-title').textContent = '已过' + daysPassed + '天';
    }

    // 页面加载时更新进度条
    updateProgressBar();

    // 每天更新一次进度条
    const updateInterval = 24 * 60 * 60 * 1000; // 24小时的毫秒数
    const progressBarUpdateTimer = setInterval(updateProgressBar, updateInterval);

    // 清除定时器，以免在页面关闭后仍然运行
    window.addEventListener('beforeunload', () => {
        clearInterval(progressBarUpdateTimer);
    });</code></pre>
添加css：
<pre class="pure-highlightjs"><code class="css">
.progress-text {
    left: 50%; /* Center the text */
    top: 50%;
    transform: translate(-50%, -50%);
}

.zbfox-time-progress {
    background: #498ef6;
    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: #216ddf;
    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: #498ef6;
    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;
}
</code></pre>