Отображение местной погоды и времени на веб-сайте - PullRequest
Новая
       90

Отображение местной погоды и времени на веб-сайте

0 голосов
/ 09 июля 2020

Я немного новичок в программировании и в последнее время начал погружаться в JavaScript. Я пытаюсь создать небольшой виджет на веб-сайте, который помогаю создавать другу. Я хочу создать виджет на веб-сайте, который отображает текущее местное время для просмотра пользователем, а также его местоположение и погоду в его или ее местоположении.

До сих пор мне удалось создать сценарий для отображать местное время для пользователя, но то, что я не могу понять, это приложение погоды.

Моя идея состоит в том, чтобы запросить IP-адрес у клиента и связать его с географическим местоположением и, наконец, с API погоды. Опять же, я новичок в этой области, поэтому любая помощь приветствуется. Похоже, я безуспешно гуглил последние два дня.

Пока что у меня есть следующий код для местного времени. 

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family:Arial, Helvetica, sans-serif;
  font-size:24px;
}   
  
</style>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>
</head>

<body onload="startTime()">
<table>
<tr><td>Current Local Time:</td><td><div id="txt"</div></tr><td></td>
</div>
</table>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 09 июля 2020

сначала попробуйте получить местоположение пользователя

теперь вам нужно использовать API и фильтровать по этому местоположению, чтобы сделать это, есть много способов, которые могут помочь в зависимости от Api, вот несколько предложений, которые вы найдете

некоторые API используют долготу и широту, а другие используют имя местоположения.

поэтому в этом примере вы получите широту и долготу местоположения пользователя, а затем используете их, как показано ниже, в методе выборки, который является GET Метод по умолчанию. 

<script>
    const getlocation = () => {
        navigator.geolocation.watchPosition(async(pos) => {
            var lat = pos.coords.latitude;
            var long = pos.coords.longitude;
            const url = "https://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long;
            const response = await fetch(url);
            const data = await response.json();
            
            console.log(data);
        });
    }
</script>

данные будут в json, поэтому вы можете перейти к любым необходимым переменным в объекте json и получить их, например, если вы получите 

{
  "coord": { "lon": 139,"lat": 35},
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01n"
    }
  ],......

вы можете создать переменную и получить погоду, сделав это 

const result = data.weather[0];
var id = result.id

Обратите внимание, что URL-адрес не работает, и вам нужен действующий ключ API или используйте другой, если он у вас есть.

0 голосов
/ 09 июля 2020

это отличный проект для изучения javascript. Чем больше у вас опыта работы с javascript, тем больше вы узнаете о различных функциях API браузера. Одной из этих функций является навигатор, который запрашивает у пользователя разрешение на геолокацию и извлекает данные: 

navigator.geolocation.getCurrentPosition( (data) => console.log(data) )

Следующая ссылка дает вам отличный и более подробный обзор возможностей геолокации браузера -> html геолокация

Теперь вы можете отправить эти значения в серверную часть, которая сопоставляет геолокацию с информацией о погоде.

...