แปลงไอพีเป็นชื่อประเทศและรูปธง

bysemicon -
0

 


     
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Check IP to Country</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }
    .loading {
      color: blue;
      font-size: 18px;
    }
    .result {
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
    }
    .flag {
      margin-top: 10px;
      width: 100px;
      height: auto;
    }
  </style>
</head>
<body>
  <h1>Check IP to Country</h1>
  <p class="loading">Loading your IP information...</p>
  <div class="result"></div>

  <script>
    // ตรวจสอบรูปแบบ IP Address
    function validateIP(ip) {
      const ipPattern = /^(\d{1,3}\.){3}\d{1,3}$/;
      if (ipPattern.test(ip)) {
        const parts = ip.split(".");
        return parts.every(part => parseInt(part, 10) >= 0 && parseInt(part, 10) <= 255);
      }
      return false;
    }

    // แปลง IP Address เป็นชื่อประเทศและรูปธง
    async function ipToCountry(ip) {
      if (!validateIP(ip)) {
        return { country: "Invalid IP Address", flag: null };
      }

      try {
        const response = await fetch(`http://ip-api.com/json/${ip}`);
        if (response.ok) {
          const data = await response.json();
          if (data.status === "success") {
            const country = data.country || "Country not found";
            const countryCode = data.countryCode || null; // ISO Alpha-2 code
            const flag = countryCode
              ? `https://flagcdn.com/w320/${countryCode.toLowerCase()}.png`
              : null; // URL ของรูปธง
            return { country, flag };
          } else {
            return { country: "Country not found", flag: null };
          }
        } else {
          return { country: "API request failed", flag: null };
        }
      } catch (error) {
        return { country: `Error: ${error.message}`, flag: null };
      }
    }

    // ฟังก์ชันดึง IP Address ของผู้ใช้และแสดงผล
    async function checkUserIP() {
      const loadingElement = document.querySelector('.loading');
      const resultElement = document.querySelector('.result');

      try {
        // ใช้ API เพื่อดึง IP Address ของผู้ใช้
        const response = await fetch('https://api.ipify.org?format=json');
        if (response.ok) {
          const data = await response.json();
          const userIP = data.ip;

          loadingElement.textContent = `Your IP: ${userIP}`;

          // ตรวจสอบและแปลง IP เป็นชื่อประเทศและรูปธง
          const { country, flag } = await ipToCountry(userIP);
          resultElement.innerHTML = `Country: ${country}<br>`;

          // ถ้ามีรูปธงให้แสดง
          if (flag) {
            const flagImg = document.createElement('img');
            flagImg.src = flag;
            flagImg.alt = `Flag of ${country}`;
            flagImg.className = 'flag';
            resultElement.appendChild(flagImg);
          }
        } else {
          loadingElement.textContent = "Failed to fetch your IP address.";
        }
      } catch (error) {
        loadingElement.textContent = `Error: ${error.message}`;
      }
    }

    // เรียกฟังก์ชันเมื่อโหลดเพจ
    window.onload = checkUserIP;
  </script>
</body>
</html>
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า