WordPress侧边栏添加倒计时V2.0
前言
之前有篇文章介绍过一个节日倒计时的html代码，这个是2.0，非常的好看，代码来源于gorpeln，并且进行了修改，不用自己更改了
截图
教程
在WordPress的小工具的自定义html中添加 如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 样式保持不变 */
.countdownNav {
margin-top: 1em;
background-color: var(--box-color-light);
border-radius: 10px;
overflow: hidden;
width: 100%;
}
.card-countdown {
margin: 0.75em 1.5em;
}
.card-countdown .item-content {
display: flex;
}
.cd-count-left {
position: relative;
display: flex;
flex-direction: column;
margin-right: 0.8rem;
line-height: 1.5;
align-items: center;
justify-content: center;
}
.cd-count-left .cd-text {
font-size: 14px;
}
.cd-count-left .cd-name {
font-weight: bold;
font-size: 18px;
}
.cd-count-left .cd-time {
font-size: 30px;
font-weight: bold;
color: #dad9e6;
}
.cd-count-left .cd-date {
font-size: 12px;
opacity: 0.6;
}
.cd-count-left::after {
content: "";
position: absolute;
right: -0.8rem;
width: 2px;
height: 80%;
background-color: #dad9e6;
opacity: 0.5;
}
.cd-count-right {
flex: 1;
margin-left: .8rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cd-count-item {
display: flex;
flex-direction: row;
align-items: center;
height: 24px;
}
.cd-item-name {
font-size: 14px;
margin-right: 0.8rem;
white-space: nowrap;
}
.cd-item-progress {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
border-radius: 8px;
background-color: var(--background-color-light);
overflow: hidden;
}
.cd-progress-bar {
height: 100%;
border-radius: 8px;
background-color: #dad9e6;
}
.cd-percentage,
.cd-remaining {
position: absolute;
font-size: 12px;
margin: 0 6px;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.cd-many {
color: #fff;
}
.cd-remaining {
opacity: 0;
transform: translateX(10px);
}
.card-countdown .item-content:hover .cd-remaining {
transform: translateX(0);
opacity: 1;
}
.card-countdown .item-content:hover .cd-percentage {
transform: translateX(-10px);
opacity: 0;
}
</style>
</head>
<body>
<div class="countdownNav" id="countdownNav">
<div class="card-widget card-countdown">
<div class="item-headline"><i></i><span></span></div>
<div class="item-content">
<div class="cd-count-left">
<span class="cd-text">距离</span>
<span class="cd-name" id="eventName">节日</span>
<span class="cd-time" id="daysUntil">000</span>
<span class="cd-date" id="eventDate">2015-08-23</span>
</div>
<div id="countRight" class="cd-count-right"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lunar-javascript@1.6.13/lunar.min.js"></script>
<script>
const CountdownTimer = (() => {
const config = {
holidays: [
{ name: "元旦", month: 1, day: 1, type: "solar" },
{ name: "春节", month: 1, day: 1, type: "lunar" }, // 农历正月初一
{ name: "元宵节", month: 1, day: 15, type: "lunar" }, // 农历正月十五
{ name: "清明节", month: 4, day: 4, type: "solar" },
{ name: "劳动节", month: 5, day: 1, type: "solar" },
{ name: "端午节", month: 5, day: 5, type: "lunar" }, // 农历五月初五
{ name: "中秋节", month: 8, day: 15, type: "lunar" }, // 农历八月十五
{ name: "国庆节", month: 10, day: 1, type: "solar" },
{ name: "重阳节", month: 9, day: 9, type: "lunar" } // 农历九月初九
],
units: {
day: { text: "今日", unit: "小时" },
week: { text: "本周", unit: "天" },
month: { text: "本月", unit: "天" },
year: { text: "本年", unit: "天" }
}
};
const calculators = {
day: () => {
const hours = new Date().getHours();
return {
remaining: 24 - hours,
percentage: (hours / 24) * 100
};
},
week: () => {
const day = new Date().getDay();
const passed = day === 0 ? 6 : day - 1;
return {
remaining: 6 - passed,
percentage: ((passed + 1) / 7) * 100
};
},
month: () => {
const now = new Date();
const total = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
const passed = now.getDate() - 1;
return {
remaining: total - passed,
percentage: (passed / total) * 100
};
},
year: () => {
const now = new Date();
const start = new Date(now.getFullYear(), 0, 1);
const total = 365 + (now.getFullYear() % 4 === 0 ? 1 : 0);
const passed = Math.floor((now - start) / 86400000);
return {
remaining: total - passed,
percentage: (passed / total) * 100
};
}
};
function getHolidayDate(holiday, year) {
if (holiday.type === "solar") {
return new Date(year, holiday.month - 1, holiday.day);
} else if (holiday.type === "lunar") {
const lunar = Lunar.fromYmd(year, holiday.month, holiday.day);
const solar = lunar.getSolar();
return new Date(Date.UTC(solar.getYear(), solar.getMonth() - 1, solar.getDay()));
}
return null;
}
function getNextHoliday() {
const now = new Date();
const currentYear = now.getFullYear();
let nextHoliday = null;
let minDiff = Infinity;
config.holidays.forEach(holiday => {
let holidayDate = getHolidayDate(holiday, currentYear);
if (holidayDate < now) {
holidayDate = getHolidayDate(holiday, currentYear + 1);
}
const diff = holidayDate - now;
if (diff > 0 && diff < minDiff) {
minDiff = diff;
nextHoliday = {
name: holiday.name,
date: holidayDate.toISOString().split("T")[0]
};
}
});
return nextHoliday;
}
function updateCountdown() {
const elements = ['eventName', 'eventDate', 'daysUntil', 'countRight']
.map(id => document.getElementById(id));
if (elements.some(el => !el)) return;
const [eventName, eventDate, daysUntil, countRight] = elements;
const now = new Date();
const currentDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const nextHoliday = getNextHoliday();
if (!nextHoliday) return;
eventName.textContent = nextHoliday.name;
eventDate.textContent = nextHoliday.date;
const holidayDate = new Date(nextHoliday.date);
daysUntil.textContent = Math.round((holidayDate - currentDate) / 86400000);
countRight.innerHTML = Object.entries(config.units)
.map(([key, { text, unit }]) => {
const { remaining, percentage } = calculators[key]();
return `
<div class="cd-count-item">
<div class="cd-item-name">${text}</div>
<div class="cd-item-progress">
<div class="cd-progress-bar" style="width: ${percentage}%; opacity: ${percentage}"></div>
<span class="cd-percentage ${percentage >= 46 ? 'cd-many' : ''}">${percentage.toFixed(2)}%</span>
<span class="cd-remaining ${percentage >= 60 ? 'cd-many' : ''}">
<span class="cd-tip">还剩</span>${remaining}<span class="cd-tip">${unit}</span>
</span>
</div>
</div>
`;
}).join('');
}
let timer;
const start = () => {
updateCountdown();
timer = setInterval(updateCountdown, 600000);
};
['pjax:complete', 'DOMContentLoaded'].forEach(event => document.addEventListener(event, start));
document.addEventListener('pjax:send', () => timer && clearInterval(timer));
return { start, stop: () => timer && clearInterval(timer) };
})();
</script>
</body>
</html>
THE END
