获取你的ip地址和浏览器信息|不死鸟资源网

文章摘要

The article provides an HTML example to retrieve and display browser information and the user's IP address. When the user clicks the browser information button, JavaScript extracts the browser name, version, operating system, and user agent string from the navigator object and updates the HTML table accordingly. The 'Get IP Address' button uses the fetch API to retrieve the public IP address from ipify.org and displays it in a separate table. If an error occurs during the process, the error message is shown in place of the IP address.

— 文章部分摘要由DeepSeek深度思考而成

可能有 bug，可复制代码通过在线演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器信息和IP地址</title>
<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
    text-align: center;
  }
  .container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  h1 {
    color: #5c67f2;
    margin-bottom: 20px;
  }
  button {
    background-color: #5c67f2;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
  }
  button:hover {
    background-color: #4a54e1;
  }
  table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>
<div class="container">
  <h1>检查您的浏览器信息和IP地址</h1>

  <button id="getBrowserInfo" class="btn">获取浏览器信息</button>
  <button id="getIPAddress" class="btn">获取IP地址</button>

  <table id="browserInfoTable" style="display:none;">
    <thead>
      <tr>
        <th>分类</th>
        <th>信息</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>浏览器</td>
        <td id="browserName">-</td>
      </tr>
      <tr>
        <td>版本</td>
        <td id="browserVersion">-</td>
      </tr>
      <tr>
        <td>操作系统</td>
        <td id="os">-</td>
      </tr>
      <tr>
        <td>用户代理字符串</td>
        <td id="userAgent">-</td>
      </tr>
    </tbody>
  </table>

  <table id="ipAddressTable" style="display:none;">
    <thead>
      <tr>
        <th>分类</th>
        <th>信息</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>IP地址</td>
        <td id="ip">-</td>
      </tr>
    </tbody>
  </table>
</div>

<script>
document.getElementById('getBrowserInfo').addEventListener('click', function() {
  const userAgent = navigator.userAgent;
  const browserInfo = {
    browserName: userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [],
    browserVersion: userAgent.match(/version\/([\d\.]+)/i) || [],
    os: userAgent.match(/(macintosh|windows|linux)/i) || [],
    userAgent: userAgent
  };

  document.getElementById('browserName').textContent = browserInfo.browserName[0].toUpperCase() + browserInfo.browserName[1] || '未知';
  document.getElementById('browserVersion').textContent = browserInfo.browserVersion[0].toUpperCase() + browserInfo.browserVersion[1] || '未知';
  document.getElementById('os').textContent = browserInfo.os[0].toUpperCase() || '未知';
  document.getElementById('userAgent').textContent = browserInfo.userAgent;

  document.getElementById('browserInfoTable').style.display = 'table';
});

document.getElementById('getIPAddress').addEventListener('click', function() {
  fetch('https://api.ipify.org?format=json')
    .then(response => response.json())
    .then(data => {
      document.getElementById('ip').textContent = data.ip;
      document.getElementById('ipAddressTable').style.display = 'table';
    })
    .catch(error => {
      document.getElementById('ip').textContent = `获取失败: ${error}`;
      document.getElementById('ipAddressTable').style.display = 'table';
    });
});
</script>
</body>
</html>

本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!