介绍

在自己的网站任意位置或版块区域内显示外网IP的小功能，如本站首页。

接口借鉴

下面文章中有几个显示外网IP的接口，可以参考，

2025最新推荐：无需代码！5个直接显示外网IP的免费接口（一键获取）

介绍 你是否需要快速查询服务器、设备或网络的外网IP地址？本文推荐5个无需代码、无需参数的极简IP接口，访问地址即可直接显示IP，涵盖国内/国际线路、IPv4/IP……

代码

<div style="width: 100%; padding: 20px; background: linear-gradient(135deg, #ff9a9e, #fad0c4); border-radius: 12px; font-family: Arial, sans-serif; color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center;">
  <div style="font-size: 18px; font-weight: bold; margin-bottom: 12px;">您的IP地址是：</div>
  <div style="display: flex; align-items: center; justify-content: center;">
    <div id="showIP" style="padding: 12px 20px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; font-size: 20px; font-weight: bold; font-family: monospace; color: #ff6f61; margin-right: 10px;">
      <span style="color: #999;">加载中...</span>
    </div>
    <button id="copyButton" style="padding: 12px 16px; background: #ff6f61; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; display: none;">复制</button>
  </div>
</div>
<script>
  (function() {
    const ipElement = document.getElementById('showIP');
    const copyButton = document.getElementById('copyButton');

    // 获取IP地址
    fetch('https://ipinfo.io/ip')
      .then(response => response.text())
      .then(ip => {
        ipElement.innerHTML = `<span style="color: #ff6f61;">${ip.trim()}</span>`;
        copyButton.style.display = 'inline-block'; // 显示复制按钮
      })
      .catch(() => fetch('https://ipapi.co/ip')
        .then(response => response.text())
        .then(ip => {
          ipElement.innerHTML = `<span style="color: #ff6f61;">${ip.trim()}</span>`;
          copyButton.style.display = 'inline-block'; // 显示复制按钮
        })
        .catch(() => {
          ipElement.innerHTML = '<span style="color: #ff6f61;">未知</span>';
        })
      );

    // 复制功能
    copyButton.addEventListener('click', () => {
      const ip = ipElement.innerText;
      navigator.clipboard.writeText(ip)
        .then(() => {
          copyButton.textContent = '已复制！';
          setTimeout(() => {
            copyButton.textContent = '复制';
          }, 2000);
        })
        .catch(() => {
          copyButton.textContent = '复制失败';
          setTimeout(() => {
            copyButton.textContent = '复制';
          }, 2000);
        });
    });
  })();
</script>