子比美化 – 侧边用户UA信息小工具

飞流 1 FLLTCN · 发表于 2025-10-10 18:16:42

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

这是一款子比主题的侧边侧边用户UA信息小工具，这款小工具非常详细的定位当前的位置，并且还有精准的IP，不过只能用户可以看到自己的地址和IP，喜欢的自行部署吧！

tengfei_down - 2025-10-10T181609.230.webp

代码部署

定位：WP后台–>>外观–>>小工具–>>自定义HTML，将下面的代码放到里面即可！

<div class="ua-info-widget" style="border: 1px solid #333; border-radius: 10px; padding: 15px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); background-color: #1a1a1a; color: #f0f0f0; max-width: 300px; transition: all 0.3s ease;">
<h3 style="margin-top: 0; color: #ffffff; border-bottom: 1px solid #444; padding-bottom: 10px; font-size: 16px; font-family: Arial, sans-serif;">设备信息</h3>
<div id="ua-loading" style="color: #bbb; padding: 10px 0; font-size: 14px;">加载中...</div>
<ul id="ua-info-list" style="display: none; list-style: none; padding: 0; margin: 10px 0;">
<li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">IP:</strong> <span id="ua-ip" style="color: #f0f0f0;"></span></li>
<li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">位置:</strong> <span id="ua-address" style="color: #f0f0f0;"></span></li>
<li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">浏览器:</strong> <span id="ua-browser" style="color: #f0f0f0;"></span></li>
<li style="padding: 6px 0; border-bottom: 1px dashed #444; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">系统:</strong> <span id="ua-os" style="color: #f0f0f0;"></span></li>
<li style="padding: 6px 0; font-size: 14px; font-family: Arial, sans-serif;"><strong style="color: #81c3ff; min-width: 65px; display: inline-block;">设备:</strong> <span id="ua-device" style="color: #f0f0f0;"></span></li>
</ul>
<div id="ua-error" style="display: none; color: #ff6b6b; font-size: 14px; padding: 10px; background-color: #2d1b1b; border-radius: 6px; border: 1px solid #4a2727;"></div>
</div>
<script>
// 检测系统是否偏好暗色模式并适配
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
// 如果是亮色模式，调整样式
document.querySelector('.ua-info-widget').style.backgroundColor = '#ffffff';
document.querySelector('.ua-info-widget').style.color = '#333';
document.querySelector('.ua-info-widget').style.borderColor = '#e0e0e0';
// 调整文本颜色
const textElements = document.querySelectorAll('#ua-info-list span');
textElements.forEach(el => {
el.style.color = '#333';
});
// 调整标题和分隔线
document.querySelector('.ua-info-widget h3').style.color = '#333';
document.querySelector('.ua-info-widget h3').style.borderBottomColor = '#f0f0f0';
// 调整加载状态
document.getElementById('ua-loading').style.color = '#666';
}
// 获取UA信息
fetch('https://v2.xxapi.cn/api/ua')
.then(response => {
if (!response.ok) {
throw new Error('网络响应不正常');
}
return response.json();
})
.then(data => {
document.getElementById('ua-loading').style.display = 'none';
if (data.code === 200 && data.data) {
document.getElementById('ua-info-list').style.display = 'block';
document.getElementById('ua-ip').textContent = data.data.ip || '未知';
document.getElementById('ua-address').textContent = data.data.address || '未知';
document.getElementById('ua-browser').textContent =
(data.data.browser || '未知') + ' ' + (data.data.browserVersion || '');
document.getElementById('ua-os').textContent = data.data.os || '未知';
document.getElementById('ua-device').textContent = data.data.deviceType || '未知';
} else {
document.getElementById('ua-error').textContent = data.msg || '获取信息失败';
document.getElementById('ua-error').style.display = 'block';
}
})
.catch(error => {
document.getElementById('ua-loading').style.display = 'none';
document.getElementById('ua-error').textContent = '加载失败: ' + error.message;
document.getElementById('ua-error').style.display = 'block';
});
</script>

复制代码

	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22
	麦麦管家：请遵守版规社律，保护信息安全，请勿脱离平台交易，谨防网络诈骗！#帮助中心#	01-24 12:40

[代码技巧] 子比美化 – 侧边用户UA信息小工具

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

连续签到LV.1

累计签到LV.3

任务·年会员

幸运抽奖·皇

幸运抽奖·尊

幸运抽奖·豪

起源之星

摩羯座

推广LV.2

钻石LV.1

注册一周年

关于我们

常用功能

服务引导