<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 使用ipapi API获取IP地址、所在城市、国家和设备信息
fetch('https://ipapi.co/json/')
.then(response => response.json())
.then(data => {
// 显示IP地址、所在城市、国家和设备信息
document.getElementById('ip').innerHTML = data.ip;
document.getElementById('city').innerHTML = data.city;
document.getElementById('country').innerHTML = data.country_name;
document.getElementById('device').innerHTML = navigator.userAgent;
// 使用Chart.js展示数据
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Desktop', 'Mobile', 'Tablet'],
datasets: [{
label: 'Device Type',
data: [data.desktop, data.mobile, data.tablet],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
})
.catch(error => console.error(error));
</script>
</head>
<body>
<h1>IP信息展示</h1>
<p>IP地址: <span id="ip"></span></p>
<p>所在城市: <span id="city"></span></p>
<p>所在国家: <span id="country"></span></p>
<p>访问设备: <span id="device"></span></p>
<canvas id="myChart"></canvas>
Comments | NOTHING
该文章已经关闭评论