李锋镝的博客

  • 首页
  • 时间轴
  • 留言
  • 插件
  • 左邻右舍
  • 我的日常
  • 关于我
    • 关于我
    • 另一个网站
  • 教程
  • 赞助
Destiny
自是人生长恨水长东
  1. 首页
  2. 原创
  3. 其他
  4. 正文

写了个日期进度条的小插件

2025年5月6日 27点热度 1人点赞 0条评论

今天逛博客,看到其他大佬的博客有个时间进度条的小插件,意动之下,就决定自己也搞一个玩玩。

主要功能是通过短码显示今天、本周、本月、今年已经过去了多久,当然也可以通过短码指定显示的类型,类型分别定义为:'day' - 今天, 'week' - 本周,'month' - 本月, 'year' - 今年。

使用方式很简单,示例如下:

  • [ countdown ]:不指定类型,全部展示。
  • [ countdown type="day" ]:只展示当天的倒计时。
  • [ countdown type="day,week" ]:展示当天和本周的倒计时。

插件整体颜色使用了莫兰迪色系,当然大家也可以根据自己的喜好进行调整。

file

整个插件代码如下,需要的自取:

<?php

// 定义短码处理函数
function countdown_shortcode( $atts ) {
    $default_atts = array(
        'type' => 'all', // 默认全部展示
        'title' => ''
    );
    $atts = shortcode_atts( $default_atts, $atts );

    $types = explode(',', str_replace(' ', '', $atts['type']));
    if (in_array('all', $types)) {
        $types = ['day', 'week','month', 'year'];
    }

    $valid_types = ['day', 'week','month', 'year'];
    $color_map = [
        'day' => '#B5EAD7',
        'week' => '#FFDAC1',
        'month' => '#E2F0CB',
        'year' => '#FFB7B2'
    ];

    $style = '<style>
       .countdown-container {
            background-color: #FAF9F6;
            border-radius: 12px;
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        }
       .countdown-item {
            height: 50px;
            position: relative;
            max-height: 80px;
            overflow: hidden;
        }
       .countdown-text {
            color: #868e96;
            font-size: 0.95em;
        }
       .countdown-progress-bar {
            height: 16px;
            background-color: #E8E8E8;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            margin-top: 3px;
        }
       .progress-bar-fill {
            height: 100%;
            border-radius: 8px;
            transition: width 1s ease;
            position: relative;
            background-image: repeating-linear-gradient(
                -45deg,
                rgba(255, 255, 255, 0.2),
                rgba(255, 255, 255, 0.2) 10px,
                transparent 10px,
                transparent 20px
            );
            background-size: 28px 28px;
            animation: spiral-move 1s linear infinite;
        }
       .countdown-percentage {
            font-size: 0.8em;
            color: #fff;
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            z-index: 2;
        }

        @keyframes spiral-move {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 28px 0;
            }
        }
    </style>';

    $script = '<script>
        function updateCountdown() {
            const now = new Date();
            const types = '. json_encode($types). ';
            const colorMap = '. json_encode($color_map). ';
            const validTypes = '. json_encode($valid_types). ';

            types.forEach(type => {
                if (!validTypes.includes(type)) return;

                let elapsed = 0;
                let total = 0;
                let text = "";

                switch (type) {
                    case "day":
                        elapsed = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
                        total = 24 * 3600;
                        text = `今天已过去 ${Math.floor(elapsed / 3600)} 小时 ${Math.floor((elapsed % 3600) / 60)} 分钟`;
                        break;
                    case "week":
                        elapsed = (now.getDay() * 24 * 3600) + (now.getHours() * 3600) + (now.getMinutes() * 60) + now.getSeconds();
                        total = 7 * 24 * 3600;
                        text = `本周已过去 ${Math.floor(elapsed / (24 * 3600))} 天 ${Math.floor((elapsed % (24 * 3600)) / 3600)} 小时 ${Math.floor((elapsed % 3600) / 60)} 分钟`;
                        break;
                    case "month":
                        const year = now.getFullYear();
                        const month = now.getMonth() + 1;
                        const daysInMonth = new Date(year, month, 0).getDate();
                        elapsed = ((now.getDate() - 1) * 24 * 3600) + (now.getHours() * 3600) + (now.getMinutes() * 60) + now.getSeconds();
                        total = daysInMonth * 24 * 3600;
                        text = `本月已过去 ${Math.floor(elapsed / (24 * 3600))} 天 ${Math.floor((elapsed % (24 * 3600)) / 3600)} 小时 ${Math.floor((elapsed % 3600) / 60)} 分钟`;
                        break;
                    case "year":
                        const startOfYear = new Date(now.getFullYear(), 0, 1);
                        const diff = now - startOfYear;
                        elapsed = Math.floor(diff / 1000);
                        const isLeapYear = (new Date(now.getFullYear(), 1, 29).getDate() === 29);
                        total = (isLeapYear? 366 : 365) * 24 * 3600;
                        text = `今年已过去 ${Math.floor(elapsed / (24 * 3600))} 天 ${Math.floor((elapsed % (24 * 3600)) / 3600)} 小时 ${Math.floor((elapsed % 3600) / 60)} 分钟`;
                        break;
                }

                const percentage = Math.round((elapsed / total) * 100);
                const item = document.getElementById(`countdown-${type}`);
                if (item) {
                    const textElement = item.querySelector(".countdown-text");
                    const percentageElement = item.querySelector(".countdown-percentage");
                    const progressBarElement = item.querySelector(".progress-bar-fill");

                    textElement.textContent = text;
                    percentageElement.textContent = `${percentage}%`;
                    progressBarElement.style.width = `${percentage}%`;
                    progressBarElement.style.backgroundColor = colorMap[type];
                }
            });
        }

        document.addEventListener("DOMContentLoaded", () => {
            updateCountdown();
            setInterval(updateCountdown, 1000 * 60);
        });
    </script>';

    ob_start();
    echo $style;
    echo '<div class="countdown-container">';
    foreach ($types as $type) {
        if (!in_array($type, $valid_types)) continue;
        ?>
        <div class="countdown-item" id="countdown-<?php echo $type;?>">
            <span class="countdown-text"></span>
            <div class="countdown-progress-bar">
                <div class="progress-bar-fill">
                    <span class="countdown-percentage"></span>
                </div>
            </div>
        </div>
        <?php
    }
    echo '</div>';
    echo $script;
    return ob_get_clean();
}

add_shortcode('countdown', 'countdown_shortcode');

本来想搞一个最近的节假日的倒计时的,不过没有找到合适的JS库,遂作罢。

菜鸡是这样的。

除非注明,否则均为李锋镝的博客原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.lifengdi.com/archives/article/4394

相关文章

  • Dylan Custom Plugin 1.0.3版本更新说明
  • Dylan Custom Plugin 1.0.2版本更新说明
  • 我的第一个WordPress插件:Dylan Custom Plugin上线了
  • WordPress自定义文章类型支持古腾堡编辑器(Gutenberg)的方法
  • wordpress增加说说功能
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: PHP WordPress 倒计时 插件 日期 进度条
最后更新:2025年5月6日

李锋镝

既然选择了远方,便只顾风雨兼程。

打赏 点赞
< 上一篇

文章评论

1 2 3 4 5 6 7 8 9 11 12 13 14 15 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 46 47 48 49 50 51 52 53 54 55 57 58 60 61 62 63 64 65 66 67 69 72 74 76 77 78 79 80 81 82 85 86 87 90 92 93 94 95 96 97 98 99
取消回复

COPYRIGHT © 2025 lifengdi.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Dylan

津ICP备2024022503号-3