WordPress侧边栏添加倒计时V2.0
2025年2月3日 00:44
前言 之前有篇文章介绍过一个节日倒计时的html代码，这个是2.0，非常的好看，代码来源于gorpeln，并且 […]
前言
今天逛博客看到一个好玩的东西，分享给大家
参考
原地址：https://blog.shiguang666.eu.org/2024/10/25/479d38b5fc12/
教程
1.首先去青桔API申请key,目前我们使用到的API是完全免费且无次数限制的。
2.访问api接口：https://api.76.al/api/ip/query?key=your_key
3.将如下代码添加到WordPress小工具中的自定义html内
<div id="announcement-widget">
<div class="card-widget card-ip-info">
<div class="announcement_content">
<div id="welcome-info" style="display: none;">
<div class="loading-spinner"></div>
</div>
</div>
</div>
</div>
<style>
#welcome-info {
display: flex;
justify-content: center;
align-items: center;
height: auto;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 3px solid #3498db;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script>
const createAnnouncementComponent = () => {
const ipInfoElement = document.createElement('div');
ipInfoElement.className = "card-widget card-ip-info";
ipInfoElement.innerHTML = `
<div class="announcement_content">
<div id="welcome-info">
<div class="loading-spinner"></div>
</div>
</div>
`;
return ipInfoElement;
};
const fetchIpInfo = () => {
fetch('https://api.76.al/api/ip/query?key=your_key')
.then(response => response.ok ? response.json() : Promise.reject('Network response was not ok'))
.then(data => showWelcome(data))
.catch(() => showErrorMessage());
};
const getDistance = (e1, n1, e2, n2) => {
const R = 6371; // Earth radius
const toRadians = (degree) => degree * (Math.PI / 180);
const a = Math.sin(toRadians(n1)) * Math.sin(toRadians(n2)) +
Math.cos(toRadians(n1)) * Math.cos(toRadians(n2)) *
Math.cos(toRadians(e1 - e2));
return Math.round(R * Math.acos(a));
};
const showWelcome = (ipLocationData) => {
if (!ipLocationData || !ipLocationData.data) {
return showErrorMessage();
}
// 修改为你自己的经纬度
const myLng = 121.38206; //经度
const myLat = 31.11325; //维度
const { lng, lat, country, prov, city, district } = ipLocationData.data; // 获取区的信息
const dist = getDistance(myLng, myLat, lng, lat);
const pos = country === "中国" ? `${prov} ${city} ${district}` : `${city}, ${district}`; // 包含区的信息
const welcomeInfoElement = document.getElementById("welcome-info");
welcomeInfoElement.style.display = 'block';
welcomeInfoElement.innerHTML = `
💖 欢迎来自 <b><span style="color:#3390ff;">${pos}</span></b> 的朋友<br>
📏 您距博主约 <b><span style="color: #3390ff;">${dist}</span></b> 公里<br>
`;
};
const showErrorMessage = () => {
const welcomeInfoElement = document.getElementById("welcome-info");
welcomeInfoElement.style.display = 'block';
welcomeInfoElement.innerHTML = `<p>获取IP信息失败,请检查网络.</p>`;
};
const initialize = () => {
document.body.appendChild(createAnnouncementComponent());
fetchIpInfo();
};
window.onload = initialize;
</script>
4.将其中的your_key改为你自己申请的key
5.访问api接口，将其中的lat和lng替换代码中的经纬度
// 修改为你自己的经纬度
const myLng = 121.38206; //经度
const myLat = 31.11325; //维度6.访问主页就可以看到了
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/6fec83b3fd936af99e1936acaede08a3.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/f9b9080c6b121bc16878da77524c67d1.webp)
![图片[2]-新锐博客](https://www.xrbk.cn/wp-content/uploads/5adf7e6ede6b8e45424156aa306faf0e.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/0e5681128ed6460400c560db69c0d69a.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/0e90f5a4636107fe19e7a0c7b8d7e656.webp)
![图片[1]-新锐博客](https://www.xrbk.cn/wp-content/uploads/05e120fa65f3a104a4ac153dd976e21c.webp)
