Прежде всего, спасибо, что даже нашли время изучить мою проблему.
Я создал программу для отображения местной погоды, времени и местоположения пользователя с помощью API при получении его IP-адреса . Код работает абсолютно нормально, когда у меня есть файл. html, но поскольку я хочу разместить его на веб-сайте, я превратил его в файл. php, который я буду включать в другие мои файлы php.
Как только я изменяю расширение файла на. php, мой код перестает работать. Я новичок в программировании, поэтому надеялся, что вы поймете, почему, раз уж я не добился успеха.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style>
body {
font-family:'Courier New', Courier, monospace
}
p {
display: inline;
}
#fps
{
display: inline;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var cityOut = document.getElementById('city');
fetch('http://ip-api.com/json/')
.then( res => res.json())
.then(response => {
cityOut.innerHTML = response.city + ', ' + response.country;
})
.catch((data, status) => {
console.log('Request failed');
})
var fpsOut = document.getElementById('fps');
setInterval(function () {
var d = new Date();
fpsOut.innerHTML = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
}, 1000);
navigator.geolocation.getCurrentPosition(success);
});
function success(pos) {
var weather = document.getElementById('weather');
var crd = pos.coords;
console.log(`Latitude : ${crd.latitude}`);
console.log(`Longitude: ${crd.longitude}`);
fetch('https://fcc-weather-api.glitch.me/api/current?lat='+crd.latitude+'&lon='+crd.longitude)
.then( res => res.json())
.then(response => {
weather.innerHTML = response.main.temp;
})
.catch((data, status) => {
console.log('Request failed');
})
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body>
<p>Current Local Time:</p>
<div id="fps"></div>
<div id="city"></div>
<div id="weather"></div>
</div>
</body>
</html>