获取你的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>

本站文章部分内容可能来源于网络,仅供大家学习参考,如有侵权,请联系站长📧cutwork@qq.com进行删除处理!