取json数据并显示

最后更新时间：2023年04月01日
<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>

声明：GhostKylin‘S BLOG|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - 取json数据并显示

你好！世界！XladminShell箱子仅供个人学习使用务必遵守《网络安全法》