【发布时间】:2020-08-05 17:04:07
【问题描述】:
我正在构建一个天气应用程序,它使用天气 IPA 显示每个城市的天气状况。 我试图以度数显示风向,但我只能在文字描述中显示,例如:Northerly','North Easterly','Easterly.. 我也想以度数显示风。
如何在javascript中以度数(例如90°)显示风向(包括在数字后使用小圆圈度数符号)?
因为我正在处理数据文件,所以如果您想查看完整代码,我无法让代码在文本编辑器之外工作。
我只能分享主要的部分代码。不过别担心,我无法分享的部分是城市的数据文件——please select——每个国家的数据文件——select a country。 --
在这段代码中,我将风向显示为文字描述,如何也以度数显示?
function text(d) {
let directions = ['Northerly', 'North Easterly', 'Easterly', 'South Easterly', 'Southerly', 'South Westerly', 'Westerly', 'North Westerly'];
d += 22.5;
if (d < 0)
d = 360 - Math.abs(d) % 360;
else
d = d % 360;
let w = parseInt(d / 45);
return `${directions[w]}`;
}
function getData(selectedCounty) {
$.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?id=' + selectedCounty + '&appid=e4761ea183f1b15b7c6af8e63724a863',
type: 'GET',
dataType: 'json',
success: function(response) {
//display the chosen city and date from the requested data
$('#cityName').empty().append('Weather for ' + response.name + ' on ' + toDD_MM_YY_format(response.dt));
//display the city name div after the user choose country and city
$('#weatherInfo').empty().append(
'Weather Conditions: ' + response.weather[0].main + '</br>' +
'Temperature :' + toCelsius(response.main.temp) + '</br>' +
'Wind Speed :' + toMilesPerHour(response.wind.speed) + '</br>' +
'Wind Direction: ' + text(response.wind.deg));
displayWeatherIcon(response.weather[0].icon);
},
error: function() {
$('#errorInfo').show().html('<p> An error has occurred, Please try again later</p>');
$('#weatherInfo').empty();
}
});
}
//convert temperature in kelvin to Celsius.
function toCelsius(kelvin) {
var tempInCelsius = Math.round(kelvin - 273.15);
return tempInCelsius + '°C';
}
//converts speed in knots to miles per hour(mph)
function toMilesPerHour(knots) {
var speedInMilesPerHour = Math.round(knots * 1.15077945); //1 Knot = 1.15077945 mph
return speedInMilesPerHour + ' mph';
}
//converts UNIX time stamp in to readable format
function toDD_MM_YY_format(unixTimeStamp) {
var d = new Date(unixTimeStamp * 1000);
var month = (d.getMonth()) + 1; //unix time stamp month starts from 0.
var formattedDate = d.getDate() + "-" + month + "-" + d.getFullYear();
return formattedDate;
}
//convert the wind direction from degree to textual description.
function text(d) {
let directions = ['Northerly', 'North Easterly', 'Easterly', 'South Easterly', 'Southerly', 'South Westerly', 'Westerly', 'North Westerly'];
d += 22.5;
if (d < 0)
d = 360 - Math.abs(d) % 360;
else
d = d % 360;
let w = parseInt(d / 45);
return `${directions[w]}`;
}
<!DOCTYPE html>
<html>
<head>
<title>UK Weather Application</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="apiweather.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>UK Weather Data</h1>
</header>
<section id="content">
<h4>Current Weather Data</h4>
<select id="countries">
<option selected>Select a Country</option>
<option value="New York">New York</option>
<option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Portugal">Portugal</option>
</select>
<select id="counties">
<option selected><<Please Select</option>
</select>
<div id="cityName"></div>
<div id="weatherInfo"></div>
<div id="errorInfo" hidden></div>
</section>
<footer>
</footer>
</body>
</html>
希望我解释得很好,请不要犹豫,问我问题。
谢谢。
【问题讨论】:
标签: javascript jquery ajax weather weather-api