效果展示
使用方法
将下面代码修改好复制粘贴到 Komari 面板管理后台中的 [设置 - 站点 - 自定义Body] 中保存即可。
代码
- 记得修改
/*自定义内容*/和/*YYYY-MM-DD*/，例：千狐和2025-09-13；- 使用
卜算子统计访客数量；- PS：点击 IP 可直接复制；
代码可能有点冗余，有大佬懂的可以帮忙优化一下- 已让 ChatGPT 进行了代码优化，增加了文字阴影效果。
<body>
<div id="bodyContent" style="display:none;">
<div class="top-info">
<div class="info-item">
<span class="info-label">/*自定义内容*/探针已运行：</span>
<span id="runtimeValue" class="info-value">计算中...</span>
</div>
<div class="info-item">
<span class="info-label">您的IP：</span>
<span id="ipValue" class="info-value ip-value">获取中...</span>
<span id="countryFlag" class="info-value" style="margin-left:5px;">🌐</span>
<span id="busuanzi_container_site_pv" class="info-label">
（您是本站👀第 <span id="busuanzi_value_site_pv"></span> 位鸡友）
</span>
</div>
</div>
<style>
.top-info {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: rgba(200, 200, 200, 0.15);
padding: 8px 14px;
border-radius: 14px;
font-size: 14px;
color: #eee;
backdrop-filter: blur(8px);
white-space: nowrap;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
body { padding-top: 0; }
.info-item { margin-right: 20px; }
.info-label { color: #b388ff; }
.info-value { color: #00e5ff; cursor: pointer; }
</style>
<script>
const countryCodeToEmoji = code => {
if (!code) return '🌐';
return String.fromCodePoint(
...code.toUpperCase().split('').map(c => 0x1F1E6 + c.charCodeAt(0) - 65)
);
};
function getVisitorIP() {
const ipValue = document.getElementById('ipValue');
const countryFlag = document.getElementById('countryFlag');
const apis = [
'https://ipapi.co/json/',
'https://ipinfo.io/json',
'https://api.myip.com',
'https://api.ipify.org?format=json'
];
(function tryAPI(i = 0) {
if (i >= apis.length) {
ipValue.textContent = '获取失败';
countryFlag.textContent = '🌐';
return;
}
fetch(apis[i])
.then(r => r.json())
.then(data => {
const ip = data.ip || data.query;
const countryCode = data.country || data.country_code;
if (!ip) throw new Error('无 IP');
ipValue.textContent = ip;
ipValue.title = '点击复制IP';
ipValue.onclick = () => {
navigator.clipboard.writeText(ip);
ipValue.textContent = '已复制!';
setTimeout(() => (ipValue.textContent = ip), 1500);
};
countryFlag.textContent = countryCodeToEmoji(countryCode);
})
.catch(() => tryAPI(i + 1));
})();
}
function updateRuntime() {
const start = new Date("/*YYYY-MM-DD*/T08:00:00");
const runtime = document.getElementById('runtimeValue');
function fmt() {
const diff = Date.now() - start;
const d = Math.floor(diff / 864e5);
const h = Math.floor((diff % 864e5) / 36e5);
const m = Math.floor((diff % 36e5) / 6e4);
const s = Math.floor((diff % 6e4) / 1e3);
runtime.textContent = `${d}天 ${h}小时 ${m}分钟 ${s}秒`;
}
fmt();
setInterval(fmt, 1000);
}
document.addEventListener('DOMContentLoaded', () => {
if (window.innerWidth <= 480) return;
document.getElementById('bodyContent').style.display = 'block';
getVisitorIP();
updateRuntime();
});
</script>
<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</div>
</body>
