我想根据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>°</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>我将这样做的方法是首先创建一个范围数组，如下所示：
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>°</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>