wordpress优雅的时间胶囊进度小工具

使用方法：自定义 HTML 小工具：添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去，保存即可。

建议把代码中的几个图片下载保存上传自己网站在使用，防止原图地址没用，导致功能效果失效

    <style type="text/css">
      .time-schedule-main{/*background-color: white;*/border-radius: 8px;display: flex; justify-content: space-evenly; align-items: center;}.today-schedule,.toweek-schedule,.tomonth-schedule,.toyear-schedule{display: inline-block;width: 50px;height: 100px;background-color: white;border: 1px solid #eee;border-radius: 99px;}.wiiuii-schedule-item{position: relative;width: 100%;height: 100%;overflow: hidden;border-radius: 99px;}.today-item,.toweek-item,.tomonth-item,.toyear-item{position: absolute;background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);width: 100%;height: 109%;bottom: 0;transition: all 1s;}.schedule-info{display: flex;color: #ff5991;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;flex-direction: column;align-items: center;justify-content: center;}.schedule-tilte{font-size: 12px;font-weight: 700;}.time-schedule-main img{background-repeat: no-repeat;max-width:unset !important;max-height:unset !important;width: 200px;height: 10px;top: 0;left: 0;position: absolute;animation: wiiuii_move_wave 2s linear infinite;-webkit-animation: wiiuii_move_wave 2s linear infinite;}@-webkit-keyframes wiiuii_move_wave{0%{-webkit-transform: translateX(0)}50%{-webkit-transform: translateX(-25%)}100%{-webkit-transform: translateX(-50%)}}@keyframes wiiuii_move_wave{0%{transform: translateX(0)}50%{transform: translateX(-25%)}100%{transform: translateX(-50%)}}
      /* 今日剩余背景颜色 */
      .today-item {
        background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);
      }
      /* 本周剩余背景颜色 */
      .toweek-item {
        background-image: linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%);
      }
      /* 本月剩余背景颜色 */
      .tomonth-item {
        background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
      }
      /* 今年剩余背景颜色 */
      .toyear-item {
        background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
      }
    </style>
    <div class="time-schedule-main">
      <div class="today-schedule">
        <div class="wiiuii-schedule-item">
          <div class="today-item">
            <img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">今日剩余</span>
            <span class="today-num">100%</span>
          </div>
        </div>
      </div>
      <div class="toweek-schedule">
        <div class="wiiuii-schedule-item">
          <div class="toweek-item">
            <img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">本周剩余</span>
            <span class="toweek-num">100%</span>
          </div>
        </div>
      </div>
      <div class="tomonth-schedule">
        <div class="wiiuii-schedule-item">
          <div class="tomonth-item">
            <img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">本月剩余</span>
            <span class="tomonth-num">100%</span>
          </div>
        </div>
      </div>
      <div class="toyear-schedule">
        <div class="wiiuii-schedule-item">
          <div class="toyear-item">
            <img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">本年剩余</span>
            <span class="toyear-num">100%</span>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
$(function() {
    $.extend({
        wiiuiiSchedule: function() {
            var a = new Date,
            e = 3600 * a.getHours() + 60 * a.getMinutes() + a.getSeconds(),
            c = e / 86400,
            b = (100 - 100 * c).toFixed(1);
            c = (109 - 109 * c).toFixed(2);
            $(".today-num").text(b + "%");
            $(".today-item").css("height", c + "%");
            b = a.getDay();
            0 === b && (b = 7);
            c = (e + 86400 * (b - 1)) / 604800;
            b = (100 - 100 * c).toFixed(1);
            c = (109 - 109 * c).toFixed(2);
            $(".toweek-num").text(b + "%");
            $(".toweek-item").css("height", c + "%");
            b = a.getFullYear();
            c = a.getMonth();
            a = a.getDate();
            var d = (new Date(b, c + 1, 0)).getDate();
            d = (e + 86400 * (a - 1)) / (86400 * d);
            var f = (100 - 100 * d).toFixed(1); (109 - 109 * d).toFixed(2);
            $(".tomonth-num").text(f + "%");
            $(".tomonth-item").css("height", f + "%");
            d = 0;
            f = [31, 0 == b % 4 && 0 != b % 100 || 0 == b % 400 ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            for (var g = 0; g < c; g++) d += f[g];
            a = (e + 86400 * (d + a - 1)) / (86400 * (0 == b % 4 && 0 != b % 100 || 0 == b % 400 ? 366 : 365));
            e = (100 - 100 * a).toFixed(1);
            a = (109 - 109 * a).toFixed(2);
            $(".toyear-num").text(e + "%");
            $(".toyear-item").css("height", a + "%")
        }
    });
    $.wiiuiiSchedule();
    setInterval($.wiiuiiSchedule, 2E3);
    console.log("\n %c 流浪[\u65f6\u95f4\u8fdb\u5ea6\u5c0f\u5de5\u5177] - https://soujiz.com", "color:#fff; background: linear-gradient(55deg, #212121 0%, #212121 40%, #323232 calc(40% + 1px), #323232 60%, #008F95 calc(60% + 1px), #008F95 70%, #14FFEC calc(70% + 1px), #14FFEC 100%);padding:5px; border-radius: 5px;")
});
    </script>

点击加入本站QQ交流群