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

飞流 · 发表于 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>

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

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

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

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn