【Z-BLOG侧栏小工具】优雅大方的时间进度小工具

第一步：创建自定义模块 后台点击模块管理 新建模块

这个应该不用多说了吧！玩zblog的大部分都知道如何创建！

第二步：添加代码

把下面的代码添加进去，保存就大功告成了！非常的简单

[CommentView]

    <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, #336699 0%, #94d5e9 100%);
      }
      /* 本周剩余背景颜色 */
      .toweek-item {
        background-image: linear-gradient(to right, #ff9a9e 0%, #3399CC 100%);
      }
      /* 本月剩余背景颜色 */
      .tomonth-item {
        background-image: linear-gradient(to right, #fbc2eb 0%, #ABCDEF 100%);
      }
      /* 今年剩余背景颜色 */
      .toyear-item {
        background-image: linear-gradient(to right, #ffecd2 0%, #0099CC 100%);
      }
    </style>
    <div class="time-schedule-main">
      <div class="today-schedule">
        <div class="wiiuii-schedule-item">
          <div class="today-item">
            <img src="https://www.wenytao.com/zb_users/upload/2022/02/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://www.wenytao.com/zb_users/upload/2022/02/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://www.wenytao.com/zb_users/upload/2022/02/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://www.wenytao.com/zb_users/upload/2022/02/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">
      eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(t(){$.K({p:t(){h a=u v,e=L*a.M()+q*a.N()+a.O(),c=e/9,b=(3-3*c).5(1);c=(6-6*c).5(2);$(".w-i").j(b+"%");$(".w-k").l("m",c+"%");b=a.P();0===b&&(b=7);c=(e+9*(b-1))/Q;b=(3-3*c).5(1);c=(6-6*c).5(2);$(".x-i").j(b+"%");$(".x-k").l("m",c+"%");b=a.R();c=a.S();a=a.y();h d=(u v(b,c+1,0)).y();d=(e+9*(a-1))/(9*d);h f=(3-3*d).5(1);(6-6*d).5(2);$(".z-i").j(f+"%");$(".z-k").l("m",f+"%");d=0;f=[8,0==b%4&&0!=b%3||0==b%A?T:U,8,o,8,o,8,8,o,8,o,8];V(h g=0;g<c;g++)d+=f[g];a=(e+9*(d+a-1))/(9*(0==b%4&&0!=b%3||0==b%A?W:X));e=(3-3*a).5(1);a=(6-6*a).5(2);$(".B-i").j(e+"%");$(".B-k").l("m",a+"%")}});$.p();Y($.p,Z);10.11("\\n %c \\12\\13\\14\\C\\15\\16[\\17\\18\\19\\1a\\C\\1b\\1c] - 1d://1e.1f.1g","1h:#1i; 1j: 1k-1l(1m, #D 0%, #D E%, #F r(E% + s), #F q%, #G r(q% + s), #G H%, #I r(H% + s), #I 3%);1n:J; 1o-1p: J;")});',62,88,'|||100||toFixed|109||31|86400||||||||var|num|text|item|css|height||30|wiiuiiSchedule|60|calc|1px|function|new|Date|today|toweek|getDate|tomonth|400|toyear|u5c0f|212121|40|323232|008F95|70|14FFEC|5px|extend|3600|getHours|getMinutes|getSeconds|getDay|604800|getFullYear|getMonth|29|28|for|366|365|setInterval|2E3|console|log|u661f|u8bed|u7684|u6728|u5c4b|u65f6|u95f4|u8fdb|u5ea6|u5de5|u5177|https|www|wiiuii|cn|color|fff|background|linear|gradient|55deg|padding|border|radius'.split('|'),0,{}))
    </script>

[/CommentView]

说明

时间进度小工具-进度条可以自定义background背景颜色，已在代码中注释了，自己可以添加自己喜欢的背景颜色。