子比主题 – 时间胶囊剩余进度小工具

飞流 · 发表于昨天 23:00

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

这是一款子比主题时间胶囊剩余进度小工具，给子比侧边加一个剩余进度的非常美观，这款时间进度小工具主要由HTML+CSS+jQuery制作而成，自己自行部署吧，我这边代码都合到一起了！

代码部署

将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML即可！建议放到：文章页-侧边栏

<div class="time-schedule-main">
<div class="today-schedule">
<div class="wiiuii-schedule-item">
<div class="today-item">
</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">
</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">
</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">
</div>
<div class="schedule-info">
<span class="schedule-tilte">本年剩余</span>
<span class="toyear-num">100%</span>
</div>
</div>
</div>
</div>
<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>
<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>

复制代码

	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49
	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22

[代码技巧] 子比主题 – 时间胶囊剩余进度小工具

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

相关帖子

飞流广播+ 发布

连签LV.1

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn