接口说明
本案例中的代码使用到了 https://ipinfo.io/ 的接口，需要自己去申请账号，获取 Token (本人申请的Token为：786036848cda13).
第一个版本
效果图为：
代码内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>禁止访问页面模板!</title>
</head>
<body style="background-color: #4a596a">
<div style="width: 400px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;">
<div style="position:relative; text-align:center; margin:0 auto;">
<svg t="1576175319582" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1718" width="200" height="200">
<path
d="M705.024 279.04l1.024 44.544c14.336 0.512 25.6 2.56 38.912 6.144 10.24 17.408 23.552 49.152 31.744 92.16h-69.632v10.24h71.68c3.072 19.968 5.12 44.544 5.632 70.144h-77.312v10.24h77.312c0 23.552-2.048 46.592-5.632 70.144h-71.68v10.24h69.12c-8.704 43.008-22.016 75.264-32.256 92.16-13.312 3.584-24.576 5.632-38.912 6.144l-1.024 44.544c123.392-3.584 221.184-104.448 221.184-228.864 0.512-123.392-96.768-224.256-220.16-227.84z m176.128 223.232H798.72c0-23.552-2.048-46.592-5.632-70.144H865.28c9.728 21.504 14.848 46.08 15.872 70.144z m-119.296-166.912c41.472 15.36 75.776 48.64 96.768 87.04h-68.096c-7.168-38.912-18.944-69.632-28.672-87.04z m0 344.576c9.728-17.408 21.504-48.128 29.184-87.04h67.584c-21.504 37.888-55.296 71.68-96.768 87.04z m31.232-97.28c3.072-19.968 5.632-44.032 5.632-70.144h82.944c-1.024 24.064-6.656 47.616-16.384 70.144h-72.192z m-145.408 102.4c13.312 3.584 33.792 5.632 48.64 6.144v-98.304h-80.384c8.192 43.008 21.504 74.752 31.744 92.16z m-34.304-102.4H696.32v-70.144h-88.576c0.512 23.552 2.56 47.104 5.632 70.144z m-5.632-80.384H696.32V432.64h-82.944c-3.584 23.04-5.632 46.08-5.632 69.632z m-139.264 5.12c0-125.952 103.936-228.352 229.888-228.352h6.144V137.216l-291.328 45.568v649.216l290.816 45.568 0.512-141.824h-6.144c-125.952 0-229.888-101.888-229.888-228.352z m125.44 5.12h-80.896c1.024 24.064 6.656 47.616 16.384 70.144h70.144c-3.072-23.04-5.12-46.592-5.632-70.144z m21.504-91.136H696.32V323.584c-14.848 0.512-35.328 3.072-48.64 6.656-10.752 17.408-23.552 48.64-32.256 91.136z m-15.872 11.264h-70.656c-9.728 22.016-15.36 45.568-15.872 70.144H593.92c0.512-26.112 2.56-50.176 5.632-70.144z m-62.976 160.256c20.48 37.376 53.76 70.656 94.72 86.528-9.728-17.408-20.992-47.616-28.672-86.528h-66.048z m94.208-257.024c-40.448 15.872-73.728 48.128-94.208 85.504h66.048c7.168-38.4 18.432-67.584 28.16-85.504z m-437.248 382.976H230.4v-35.84h-37.376l0.512 35.84z m-72.192 0h34.816v-35.84h-34.816v35.84z m157.184-56.32l20.48 20.48H266.24v35.84h32.768l-18.432 26.112 21.504 15.872 54.784-62.464-57.344-57.344-20.992 21.504zM194.56 500.736h-36.352v34.304H194.56v-34.304z m-109.056 34.816h35.328v-34.304h-35.328v34.304z m177.664-80.384l48.128 46.08H228.864v34.304h82.432l-48.128 46.08 20.992 20.992 83.968-83.968-83.968-84.48-20.992 20.992zM194.56 319.488H122.88v36.352h71.68v-36.352z m87.04 55.808l20.992 20.992L360.96 337.92 302.592 279.552 281.6 300.544l22.528 18.944H230.912v36.352h72.704L281.6 375.296z"
fill="#63BA4D" p-id="1719">
</path>
</svg>
</div>
<div style="text-align: center;color: #84eedf">
<h3>您的IP地址是:
<p id="ipAddress">正在获取您的IP地址... </p>
</h3>
<h3 id="prompt">您所在的地区被限制访问！</h3>
<h6 style="margin-top: 60px; color: #9df1e5; margin-bottom: -10px;">Powered by [email protected]</h6>
<h6 style="color: #9df1e5;">Copyright?2023-2033 AckyStack & Starhome Cloud All Rights Reserved.</h6>
</div>
<script>
function getPublicIP() {
return fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => data.ip)
.catch(error => console.error('Error fetching public IP:', error));
}
function showUserIP(ip) {
const ipAddressElement = document.getElementById('ipAddress');
ipAddressElement.textContent = ip;
}
getPublicIP().then(showUserIP);
</script>
</body>
</html
|
第二个版本
效果图为
代码内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>禁止访问页面模板!</title>
</head>
<body style="background-color: #4a596a">
<div style="width: 400px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;">
<div style="position:relative; text-align:center; margin:0 auto;">
<svg t="1576175319582" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1718" width="200" height="200">
<path
d="M705.024 279.04l1.024 44.544c14.336 0.512 25.6 2.56 38.912 6.144 10.24 17.408 23.552 49.152 31.744 92.16h-69.632v10.24h71.68c3.072 19.968 5.12 44.544 5.632 70.144h-77.312v10.24h77.312c0 23.552-2.048 46.592-5.632 70.144h-71.68v10.24h69.12c-8.704 43.008-22.016 75.264-32.256 92.16-13.312 3.584-24.576 5.632-38.912 6.144l-1.024 44.544c123.392-3.584 221.184-104.448 221.184-228.864 0.512-123.392-96.768-224.256-220.16-227.84z m176.128 223.232H798.72c0-23.552-2.048-46.592-5.632-70.144H865.28c9.728 21.504 14.848 46.08 15.872 70.144z m-119.296-166.912c41.472 15.36 75.776 48.64 96.768 87.04h-68.096c-7.168-38.912-18.944-69.632-28.672-87.04z m0 344.576c9.728-17.408 21.504-48.128 29.184-87.04h67.584c-21.504 37.888-55.296 71.68-96.768 87.04z m31.232-97.28c3.072-19.968 5.632-44.032 5.632-70.144h82.944c-1.024 24.064-6.656 47.616-16.384 70.144h-72.192z m-145.408 102.4c13.312 3.584 33.792 5.632 48.64 6.144v-98.304h-80.384c8.192 43.008 21.504 74.752 31.744 92.16z m-34.304-102.4H696.32v-70.144h-88.576c0.512 23.552 2.56 47.104 5.632 70.144z m-5.632-80.384H696.32V432.64h-82.944c-3.584 23.04-5.632 46.08-5.632 69.632z m-139.264 5.12c0-125.952 103.936-228.352 229.888-228.352h6.144V137.216l-291.328 45.568v649.216l290.816 45.568 0.512-141.824h-6.144c-125.952 0-229.888-101.888-229.888-228.352z m125.44 5.12h-80.896c1.024 24.064 6.656 47.616 16.384 70.144h70.144c-3.072-23.04-5.12-46.592-5.632-70.144z m21.504-91.136H696.32V323.584c-14.848 0.512-35.328 3.072-48.64 6.656-10.752 17.408-23.552 48.64-32.256 91.136z m-15.872 11.264h-70.656c-9.728 22.016-15.36 45.568-15.872 70.144H593.92c0.512-26.112 2.56-50.176 5.632-70.144z m-62.976 160.256c20.48 37.376 53.76 70.656 94.72 86.528-9.728-17.408-20.992-47.616-28.672-86.528h-66.048z m94.208-257.024c-40.448 15.872-73.728 48.128-94.208 85.504h66.048c7.168-38.4 18.432-67.584 28.16-85.504z m-437.248 382.976H230.4v-35.84h-37.376l0.512 35.84z m-72.192 0h34.816v-35.84h-34.816v35.84z m157.184-56.32l20.48 20.48H266.24v35.84h32.768l-18.432 26.112 21.504 15.872 54.784-62.464-57.344-57.344-20.992 21.504zM194.56 500.736h-36.352v34.304H194.56v-34.304z m-109.056 34.816h35.328v-34.304h-35.328v34.304z m177.664-80.384l48.128 46.08H228.864v34.304h82.432l-48.128 46.08 20.992 20.992 83.968-83.968-83.968-84.48-20.992 20.992zM194.56 319.488H122.88v36.352h71.68v-36.352z m87.04 55.808l20.992 20.992L360.96 337.92 302.592 279.552 281.6 300.544l22.528 18.944H230.912v36.352h72.704L281.6 375.296z"
fill="#63BA4D" p-id="1719">
</path>
</svg>
</div>
<div style="text-align: center;color: #84eedf">
<h3>
<p id="ipAndCity">正在获取您的IP地址... </p>
</h3>
<h3 id="prompt">该地区被限制访问！</h3>
<h6 style="margin-top: 60px; color: #9df1e5; margin-bottom: -10px;">Powered by [email protected]</h6>
<h6 style="color: #9df1e5;">Copyright?2023-2033 AckyStack & Starhome Cloud All Rights Reserved.</h6>
</div>
<script>
function getPublicIP() {
return fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => data.ip)
.catch(error => console.error('Error fetching public IP:', error));
}
function getCityFromIP(ip) {
const apiUrl = `https://ipapi.co/${ip}/json/`;
return fetch(apiUrl)
.then(response => response.json())
.then(data => {
if (data.error) {
throw new Error(data.reason);
}
return fetch(`https://ipinfo.io/${ip}/json?token=786036848cda13`);
})
.then(response => response.json())
.then(data => data.city)
.catch(error => console.error('Error fetching city:', error));
}
function showIPAndCity(ip, city) {
const ipAndCityElement = document.getElementById('ipAndCity');
ipAndCityElement.textContent = `您的IP地址为: ${ip}，所在城市为: ${city}`;
}
getPublicIP()
.then(ip => getCityFromIP(ip))
.then(city => {
getPublicIP()
.then(ip => showIPAndCity(ip, city))
.catch(error => console.error('Error:', error));
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html
|
