Как отобразить изображение в зависимости от температурного диапазона или погодных условий - PullRequest
Новая
       17

Как отобразить изображение в зависимости от температурного диапазона или погодных условий

0 голосов
/ 13 марта 2019

Я хочу отображать изображения в зависимости от температуры или погодных условий, которые предоставляет API OpenWeatherMap. Пока я получил его, чтобы показать мне базовый отчет о погоде, но я не могу понять, как создать оператор IF на основе предоставленных данных. Может кто-нибудь показать мне, как я буду создавать оператор IF в сочетании с диапазоном температур или исходя из текущих погодных условий? Я разместил свой текущий сценарий ниже. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weersinformatie API Bergschenhoek</title>
  <style>
html, body { 
	font-size: 20px; 
	font-family: Arial, sans-serif;
	background-color: #d70080; 
	width: 100%;
	height: 100%;
	line-height: 2;
}
	
h1 {
	color:#f4f4f4;
}
	
div {
       position: absolute;
       top: 30%;
       width: 100%;
       text-align: center;
}
	  
ul {
	list-style:none;
	color: #fff;
}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class=ïmg" id="data-img">
  <section>
    <h1>Huidige weer in Bergschenhoek</h1>
    
    <ul>
      <li><b>Weersconditie:</b> <span id="data-current"></span></li>
      <li><b>Temperatuur:</b> <span id="data-temp"></span>&deg;</li>
      <li><b>Luchtvochtigheid:</b> <span id="data-humidity"></span>%</li>
      <li><b>Windsterkte:</b> <span id="data-wind"></span> km/u</li>
    </ul>
  </section></div>
  <script>
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Bergschenhoek&units=metric&APPID=d2e5fd3c23340d44d09af919eb51e52a",function(data){ 

            console.log(data);
            $("#data-current").text(data.weather[0].description);
            $("#data-temp").text(data.main.temp);
            $("#data-humidity").text(data.main.humidity);
            $("#data-wind").text(data.wind.speed);
        })
        .fail(function(jqxhr, textStatus, error) {
        console.log("Request Failed" + textStatus + "," + error);
        });
</script>
</body>
</html>

1 Ответ

0 голосов
/ 13 марта 2019

Я хотел бы сначала создать массив диапазонов, например, так: 

let tempRanges = [{low: 0, high: 10, image: '0-10.png'}, {low: 10, high: 20, image: '10-20.png'}, {low: 20, high: 30, image: '20-30.png'}];

Я работаю в предположении, что ваши температурные диапазоны не пересекаются.Используемые здесь значения, очевидно, являются только примером.

Затем создайте функцию, которая найдет соответствующий диапазон на основе указанной температуры: 

function findRangeByTemperature(temp) {
   return tempRanges.find(range => {
      return temp >= range.low && temp < range.high;
   });
}

Обратите внимание, что нижняя граница диапазона включительно, а верхняядиапазон не является.Таким образом, с учетом диапазонов 0-10 и 10-20 и входной температуры 10, он попадет в диапазон 10-20.Это сделано для предотвращения неоднозначности при сопоставлении диапазонов.

Наконец, в вашем коде это будет выглядеть примерно так: 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Weersinformatie API Bergschenhoek</title>
    <style>
    html,
    body {
        font-size: 20px;
        font-family: Arial, sans-serif;
        background-color: #d70080;
        width: 100%;
        height: 100%;
        line-height: 2;
    }

    h1 {
        color: #f4f4f4;
    }

    div {
        position: absolute;
        top: 30%;
        width: 100%;
        text-align: center;
    }

    ul {
        list-style: none;
        color: #fff;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
    <div class=ïmg" id="data-img">
        <section>
            <h1>Huidige weer in Bergschenhoek</h1>
            <ul>
                <li><b>Weersconditie:</b> <span id="data-current"></span></li>
                <li><b>Temperatuur:</b> <span id="data-temp"></span>&deg;</li>
                <li><b>Luchtvochtigheid:</b> <span id="data-humidity"></span>%</li>
                <li><b>Windsterkte:</b> <span id="data-wind"></span> km/u</li>
            </ul>
            <img id="data-temp-img" />
        </section>
    </div>
    <script>

    let tempRanges = [{low: 0, high: 10, image: '0-10.png'}, {low: 10, high: 20, image: '10-20.png'}, {low: 20, high: 30, image: '20-30.png'}];

    function findRangeByTemperature(temp) {
       return tempRanges.find(range => {
          return temp >= range.low && temp < range.high;
       });
    }

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?q=Bergschenhoek&units=metric&APPID=d2e5fd3c23340d44d09af919eb51e52a", function(data) {

        console.log(data);
        $("#data-current").text(data.weather[0].description);
        $("#data-temp").text(data.main.temp);
        $("#data-humidity").text(data.main.humidity);
        $("#data-wind").text(data.wind.speed);

        let range = findRangeByTemperature(data.main.temp);
        // range was found
        if(range) {
            // display range.image
            $("#data-temp-img").attr("src", range.image);
        }
        else {
            // range was not found, maybe show a default image?
        }
    })
    .fail(function(jqxhr, textStatus, error) {
        console.log("Request Failed" + textStatus + "," + error);
    });

    </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...