闲来无事捣鼓一个哪吒探针V0网页底部显示访问者ip的小玩意，不喜勿喷。代码稍作调整，原代码会导致网页最上面信息展开无法操作，做成悬浮显示效果。

登录哪吒探针-设置-自定义代码（包括 style 和 script） 使用主题：ServerStatus
粘贴以下内容：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>IP 地址查询</title><style>    /* 1. 移除body上的所有样式，让现有网页的body样式保持不变 */    /* body { ... } 此处不再需要 */    /* 2. 为新的IP查询组件设置样式，使其固定在底部中间 */    #ip-query-widget {        position: fixed; /* 固定在视口中，不随滚动条移动 */        bottom: 60px;    /* ！！！这里是关键修改：距离底部60px，比之前高了40px ！！！ */        left: 50%;       /* 从左侧50%开始 */        transform: translateX(-50%); /* 向左移动自身宽度的一半，实现水平居中 */        /* width: auto; */ /* 宽度根据内容自适应 */        max-width: 90%; /* 最大宽度，防止在小屏幕上过宽 */        background-color: rgba(255, 255, 255, 0.95); /* 略带透明的背景 */        border: 1px solid #e0e6ed; /* 浅色边框 */        border-radius: 12px; /* 更圆润的边角 */        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* 更柔和的阴影 */        padding: 15px 25px; /* 增加内边距 */        box-sizing: border-box;        z-index: 1000; /* 确保它在其他内容之上 */        text-align: center; /* 文本居中 */        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;        color: #333;        transition: all 0.4s ease-in-out; /* 更平滑的过渡效果 */        display: flex; /* 使用Flexbox确保内容居中 */        align-items: center;        justify-content: center;        flex-wrap: wrap; /* 允许内容换行 */    }    /* 3. 调整 result-container 的样式 */    #result-container {        /* 在这里不再需要背景、边框、阴影等，因为它们已经由 #ip-query-widget 提供 */        background: none;        border: none;        box-shadow: none;        backdrop-filter: none;        -webkit-backdrop-filter: none;        padding: 0; /* 移除内边距，让文本紧贴 */        margin: 0; /* 移除所有外边距 */        max-width: 100%; /* 确保在组件内宽度自适应 */        box-sizing: border-box;        text-align: center; /* 文本居中 */        font-size: 18px; /* 字体可以稍微大一点，更显眼 */        line-height: 1.8;        display: inline-block; /* 让它根据内容宽度显示 */    }    #result {        white-space: nowrap; /* 保持不换行，如果内容太长，媒体查询会处理 */        font-weight: 600; /* 加粗字体 */        color: #444; /* fallback color */                /* 这些渐变和动画效果保持不变，因为是作用在文本上的 */        background: linear-gradient(90deg, #6a82fb, #fc5c7d); /* 更鲜艳的渐变 */        -webkit-background-clip: text;        background-clip: text;        -webkit-text-fill-color: transparent;        color: transparent; /* Makes the text transparent, revealing the background gradient */        animation: textGradientShift 4s ease-in-out infinite alternate;        background-size: 200% auto;    }    /* 文本渐变动画保持不变 */    @keyframes textGradientShift {        0% { background-position: 0% 50%; }        100% { background-position: 100% 50%; }    }    /* header-branding 和 footer-info 可能需要移除或重新设计 */    .header-branding, .footer-info {        display: none; /* 暂时隐藏，因为它们通常是整个页面的标题/页脚 */    }    /* 针对不同屏幕大小的响应式调整 */    @media (max-width: 768px) {        #ip-query-widget {            bottom: 40px; /* ！！！小屏幕下也向上移动一点 ！！！ */            padding: 10px 15px; /* 减小内边距 */            border-radius: 8px; /* 小屏幕下边角略小 */        }        #result-container {            font-size: 15px; /* 小屏幕下字体也调整 */            line-height: 1.6;        }        #result {            white-space: normal; /* 小屏幕下允许换行 */            word-break: break-all; /* 防止长IP地址溢出 */        }    }</style></head><body>    <div id="ip-query-widget">        <div id="result-container">            <div id="result">                正在查询您的IP信息...            </div>        </div>                <script type="text/javascript">            function callback(ip, location, asn, org) {                var resultDiv = document.getElementById('result');                // 确保location和asn有值，避免显示'undefined'                const displayLocation = location ? location : '未知地区';                const displayAsn = asn ? asn : '未知ASN';                resultDiv.innerHTML = `访问IP: ${ip} | ${displayLocation} | ${displayAsn}`;            }        </script>                <script type="text/javascript" src="https://ping0.cc/geo/jsonp/callback"></script>        </div>    </body></html>

预览：