2026.4.11 增加了ip点击查询 弃用了ping0.cc
增加了 ipinfo.io 增加了cdn链接跳转
前言
页脚是要手动改代码的
<!-- 访客信息页脚 -->
<footer style="text-align: center;">
<div id="visitor-info-display" style="white-space: nowrap;">
<span id="vi-device">设备：检测中...</span>
<span>|</span>
<span id="vi-browser">浏览器：检测中...</span>
<span>|</span>
<span id="vi-ip">IP：获取中...</span>
<span>|</span>
<span id="vi-location">位置：定位中...</span>
<span>|</span>
<span id="vi-source">查询源：等待中...</span>
<span>|</span>
<a href="https://console.tencentcloud.com/edgeone/" target="_blank" style="text-decoration:none;color:#666;font-size:12px;">
由Tencent Cloud EdgeOne 提供CDN加速及防护
</a>
<span>|</span>
<span>© Beibingの小窝 保留所有权利</span>
</div>
</footer>
<script>
(function() {
const ua = navigator.userAgent;
function detectDevice() {
if (/iPad|Tablet/i.test(ua)) return '平板';
if (/Mobile|Android|iPhone/i.test(ua)) return '手机';
if (/Windows/i.test(ua)) return 'Windows';
if (/Mac/i.test(ua)) return 'Mac';
if (/Linux/i.test(ua)) return 'Linux';
return '电脑';
}
function detectBrowser() {
if (/Edg/i.test(ua)) return 'Edge';
if (/Opera|OPR/i.test(ua)) return 'Opera';
if (/Firefox/i.test(ua)) return 'Firefox';
if (/Safari/i.test(ua) && !/Chrome/i.test(ua)) return 'Safari';
if (/Chrome/i.test(ua)) return 'Chrome';
return '未知';
}
function isPrivateIP(ip) {
if (!ip || ip === 'unknown' || ip === '127.0.0.1') return true;
return /^(127\.|10\.|192\.168\.|172\.(1[6-9]|2[0-9]|3[01])\.)|::1|fe80:/i.test(ip);
}
async function fetchWithTimeout(url, timeout) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
try {
const res = await fetch(url, { signal: controller.signal });
clearTimeout(id);
return res;
} catch (e) {
clearTimeout(id);
throw e;
}
}
</script>这里手动改
仿照格式改
<span id="">由xxxx 提供CDN加速及防护</span>
<span>|</span>
<span id="">© xxxx 保留所有权利</span>当然，亦可以直接删除
原理
这是这段代码的原理详解：
HTML 结构原理
这是这段代码的原理详解：
HTML 结构原理
<footer> 页脚容器
text-align: center使内部所有文本和行内元素水平居中
<div id="visitor-info-display"> 信息展示区域
包含 7 个
<span>元素，用|分隔所有
<span>默认display: inline，自然横向排列问题：没有
white-space: nowrap，内容过多时会自动换行
空的 id="" 属性
最后两个
<span>有id=""但无值，这是无效 HTML浏览器会忽略空 id，但建议删除避免潜在问题
JavaScript 原理
立即执行函数 (IIFE)
JavaScript
复制
(function() { ... })();创建独立作用域，避免变量污染全局命名空间
设备检测 detectDevice()
表格
优先级：平板 → 手机 → 桌面系统，避免平板被误判为手机
浏览器检测 detectBrowser()
表格
IP 获取 fetchIP()
双 API 容错机制：
尝试 ping0.cc/geo 已弃用
↓ 成功 → 显示 IP 和位置
↓ 失败
尝试 api.ip.sb/geoip
↓ 成功 → 显示 IP 和位置
↓ 失败
显示"获取失败"
评论区