子比主题 – 两款恋爱天数小工具（两款）
给子比侧边加一个恋爱天数小工具，我想了好长时间要不要给他封装成小工具，我想来想去还是不封装了，因为我用的子主题我还要去弄到我的子主题，麻烦的很，直接上两个小工具的代码吧，去代码里面改日期就行了，这个是拿的别人的代码，但是没有适配昼夜，我这边适配了，有空闲了再封装小工具第一款第二款
代码部署
将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML即可
<script src="//at.alicdn.com/t/c/font_3977018_i7ssrxgnwh.js"></script>
<style>
.wniui_icon {
width: 1.5rem;
height: 1.5rem;
fill: currentColor;
overflow: hidden;
}
.wniui_couple {
text-align: center;
}
.wniui_couple .wniui_pic {
border-radius: 50%;
width: 5rem;
background: #fff;
padding: 0.125rem;
}
.wniui_wniui_couple-love {
width: 2.1875rem;
margin: 1.25rem 0;
animation: heartbeat 1.33s ease-in-out infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1)
}
50% {
transform: scale(.8)
}
to {
transform: scale(1)
}
}
#our-company {
/* background: aliceblue; */
text-align: center;
margin: 1rem auto;
color: #7d7474;
width: 100%;
border-radius: 0.25rem;
padding: 0.5rem 0;
user-select: none;
}
#our-company span {
margin: 0 .25rem;
vertical-align: middle;
}
#our-company svg.icon {
width: 1.5rem;
height: 1.5rem;
}
.wniui_sidebar-box {
font-size: 1.25rem;
/* border: 0.1rem solid #e9ecef; */
padding: 1rem 0;
background: var(--main-bg-color);
min-height: 10rem;
color: #4a4a4a;
word-break: break-all;
border-radius: 0.8rem;
margin-bottom: 1rem;
box-shadow: 0.5rem 0.875rem 2.375rem rgb(39 44 49 / 6%), 0.0625rem 0.1875rem 0.5rem rgb(39 44 49 / 3%);
}
::-webkit-scrollbar {
width: 0.375rem;
height: 0.375rem;
}
::-webkit-scrollbar-track {
border-radius: 0.1875rem;
background: rgba(0, 0, 0, 0.06);
-webkit-box-shadow: inset 0 0 0.3125rem rgba(0, 0, 0, 0.08);
}
::-webkit-scrollbar-thumb {
border-radius: 0.1875rem;
background: linear-gradient(to right, #0acffe 0%, #495aff 100%);
-webkit-box-shadow: inset 0 0 0.625rem rgba(0, 0, 0, 0.2);
}
</style>
<div class="wniui_sidebar-box wniui_couple"> <img class="wniui_pic" src="https://q1.qlogo.cn/g?b=qq&nk=1502586285&s=640"
alt="博主"> <img class="wniui_wniui_couple-love" src="https://www.wniui.com/image/love/love.png" alt="爱心"> <img
class="wniui_pic" src="https://q1.qlogo.cn/g?b=qq&nk=1502586285&s=100" alt="另一半">
<div id="our-company" data-start="2020-11-06"> </div>
</div>
<script>
const startDate = '2023-03-12';
function timeDifference(startDate) {
const start = new Date(startDate);
const diff = new Date() - start;
return {
years: Math.floor(diff / (1000 * 60 * 60 * 24 * 365)),
days: Math.floor((diff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24)),
hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
seconds: Math.floor((diff % (1000 * 60)) / 1000)
};
}
function updateTime() {
const el = document.getElementById('our-company');
if (!el) return;
const { years, days, hours, minutes, seconds } = timeDifference(startDate);
el.innerHTML = `
<span>${years}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-nianqi" rel="external nofollow" ></use></svg>
<span>${days}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-tianshu" rel="external nofollow" ></use></svg>
<span>${hours}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-xiaoshi" rel="external nofollow" ></use></svg>
<span>${minutes}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-fen" rel="external nofollow" ></use></svg>
<span>${seconds}</span><svg class="wniui_icon" aria-hidden="true"><use xlink:href="#icon-miao" rel="external nofollow" ></use></svg>
`;
}
document.addEventListener('DOMContentLoaded', () => {
updateTime();
setInterval(updateTime, 1000);
});
</script>如果想修改日期的时间，那么修改代码里面的下面的代码即可
const startDate = '2023-03-12';
将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML即可
<!-- 恋爱计时 -->
<ul class="joe_header__slideout-count">
<div id="wniui_love"
style="width: 100%; height: 100%; text-align: center; font-size: 1rem;background-color: var(--main-bg-color);padding: 20px 0;border-radius: 20px;">
<div id="wniui_loveImage" style="width: 200px; margin: 0 auto;">
<!-- 左边的头像 -->
<img src="https://q1.qlogo.cn/g?b=qq&nk=1176996982&s=640" alt="love"
style="width: 60px; border-radius: 50%;">
<!-- 中间的图片 -->
<img src="https://img-blog.nos-eastchina1.126.net/User/loveline/lovecat.gif" alt="love"
style="width: 60px; border-radius: 50%;">
<!-- 右边的头像 -->
<img src="https://q1.qlogo.cn/g?b=qq&nk=1004207495&s=100" alt="love"
style="width: 60px; border-radius: 50%;">
</div>
<p id="loveSitetime" style="font-size: 1.0rem;"></p>
<script language=javascript>
function loveSitetime() {
window.setTimeout("loveSitetime()", 1000);
var seconds = 1000
var minutes = seconds * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365
var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth() + 1
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()
// 时间设置
var t1 = Date.UTC(2021, 04, 05, 21, 00, 00)
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
var diff = t2 - t1
var diffYears = Math.floor(diff / years)
var diffDays = Math.floor((diff / days) - diffYears * 365)
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
diffMinutes * minutes) / seconds)
document.getElementById("loveSitetime").innerHTML = "我们相恋了：</br>" + diffYears + "年" + diffDays + "天" +
diffHours + "时" + diffMinutes + "分" + diffSeconds + "秒啦</br>"
}
loveSitetime()
</script>
</div>
</ul>如果想修改日期的时间，那么修改代码里面的下面的代码即可
var t1 = Date.UTC(2021, 04, 05, 21, 00, 00)
页:
[1]