Question

我想根据OpenWeatherMap API提供的温度或天气条件显示图像。到目前为止，我已经获得了它来向我展示基本的天气报告，但是我不知道如何根据所提供的数据创建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>

Answer 1

我要解决的方法是首先创建一个范围数组，如下所示：

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>

如何根据温度范围或天气状况显示图像

1 个答案: