Как отобразить изображение в зависимости от температурного диапазона или погодных условий
public static void MoveUpOrDownSelectedItem(ListBox LisBox, bool MoveUp)
{
if (LisBox.SelectedIndex > 0 && MoveUp)
{
// add a duplicate item up in the listbox
LisBox.Items.Insert(LisBox.SelectedIndex - 1, LisBox.SelectedItem);
// make it the current item
LisBox.SelectedIndex = (LisBox.SelectedIndex - 2);
// delete the old occurrence of this item
LisBox.Items.RemoveAt(LisBox.SelectedIndex + 2);
}
if ((LisBox.SelectedIndex != -1) && (LisBox.SelectedIndex < LisBox.Items.Count- 1) && MoveUp == false)
{
// add a duplicate item down in the listbox
int IndexToRemove = LisBox.SelectedIndex;
LisBox.Items.Insert(LisBox.SelectedIndex + 2, LisBox.SelectedItem);
// make it the current item
LisBox.SelectedIndex = (LisBox.SelectedIndex + 2);
// delete the old occurrence of this item
LisBox.Items.RemoveAt(IndexToRemove);
}
}
0
задан abadalyan 14 March 2019 в 03:12
поделиться
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>°</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>
0
ответ дан abadalyan 14 March 2019 в 03:12
поделиться
Другие вопросы по тегам: