首页侧边栏添加一个当前时间进度效果小工具搬砖的小易4个月前更新关注私信0377 所有的 JS 和 css 代码都集成在本地,没有外链调用,至于如果需要自己改颜色的话,查看代码当中的注释效果即可。 显示效果展示: 在后台—》外观—》小工具—》自定义 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;}.mizhi-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: mizhi_move_wave 2s linear infinite;-webkit-animation: mizhi_move_wave 2s linear infinite;}@-webkit-keyframes mizhi_move_wave{0%{-webkit-transform: translateX(0)}50%{-webkit-transform: translateX(-25%)}100%{-webkit-transform: translateX(-50%)}}@keyframes mizhi_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="mizhi-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="mizhi-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="mizhi-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="mizhi-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({ mizhiSchedule: 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 + "%"); } }); $.mizhiSchedule(); setInterval($.mizhiSchedule, 2e3); }); </script> <!--www.yihuanyun.cc 时间进度效果小工具结束--> 供学习和研究使用,禁止商业用途 购买前可以联系作者确认资源信息,防止交易矛盾 © 版权声明 版权声明 1 本网站名称:易幻云资源网 2 本站永久网址:https://www.yihuanyun.cc 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ2956667505进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报 6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 THE END美化教程 喜欢就支持一下吧点赞7收藏