示範網站:https://kkcat-ip.pages.dev
這個網頁的主要功能是展示訪問者的公共 IP 信息,包括網絡、城市、國家、大陸、時區及其地理坐標。此外,網頁還能顯示與特定 Telegram 數據中心的連接狀態,包括它們的響應時間和當前狀態(通過顏色指示燈顯示)。
- 用戶界面:網頁使用流暢的漸變背景和中性色調的設計元素,營造出清新而現代的視覺效果。整個界面布局簡潔,所有信息都被優雅地組織並易於讀取。
- 實時數據獲取:通過異步 JavaScript 請求,網頁實時從公開的 API 獲取 IP 數據和 Telegram 數據中心的狀態。
- 狀態指示燈:每個數據中心旁邊有一個狀態燈,根據數據中心的狀態顯示不同的顏色。綠色代表一切正常,紅色則表示有問題。此外,這些狀態燈還會有閃爍效果,以引起用戶的注意。
- 響應式設計:網頁能夠適應不同大小的屏幕,確保在手機、平板和桌面計算機上都能提供良好的用戶體驗。
網頁後端采用了異步 JavaScript(AJAX)來處理數據的獲取和展示。使用 fetch API 從不同的源異步獲取數據,然後將結果動態顯示在頁面上。例如,通過以下代碼片段獲取 IP 信息:
async function fetchIPInfo() {
try {
const response = await fetch('https://ipapi.co/json/');
const data = await response.json();
const info = `IP: ${data.ip}
Network: ${data.network}
City: ${data.city}
Country: ${data.country_name} (${data.country_code})
Continent: ${data.continent_code}
Time Zone: ${data.timezone} (UTC Offset: ${data.utc_offset})
Latitude: ${data.latitude}
Longitude: ${data.longitude}
ASN: ${data.asn}
Organization: ${data.org}`;
document.getElementById('ipInfo').innerText = info;
} catch (error) {
document.getElementById('ipInfo').innerText = 'Unable to fetch IP information. Please check your network settings or try again later.';
}
}
Cloudflare Pages / 自行upload index.html