我试图在屏幕上写一些文字，但文字会根据天气和条件（描述）而改变。我正在研究这个代码。
var weatherData = {
city: document.querySelector ("#city"),
weather: document.querySelector ("#weather"),
temperature: document.querySelector("#temperature"),
temperatureValue: 0,
units: "°C"
};
function roundTemperature(temperature){
temperature = temperature.toFixed(1);
return temperature;
}
function switchUnits (){
if (weatherData.units == "°C") {
weatherData.temperatureValue = roundTemperature(weatherData.temperatureValue * 9/5 + 32);
weatherData.units = "°F";
} else {
weatherData.temperatureValue = roundTemperature ((weatherData.temperatureValue -32) * 5/9);
weatherData.units = "°C";
}
weatherData.temperature.innerHTML = weatherData.temperatureValue + weatherData.units + " ";
}
function getLocationAndWeather(){
if (window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function() {
var response = JSON.parse(xhr.responseText);
console.log(response);
var position = {
latitude: response.latitude,
longitude: response.longitude
};
var cityName = response.city;
var weatherSimpleDescription = response.weather.simple;
var weatherDescription = translateDescription(response.weather.description);
var weatherTemperature = roundTemperature(response.weather.temperature);
weatherData.temperatureValue = weatherTemperature;
loadBackground(position.latitude, position.longitude, weatherSimpleDescription);
weatherData.city.innerHTML = cityName;
weatherData.weather.innerHTML = ", " + weatherDescription;
weatherData.temperature.innerHTML = weatherTemperature + weatherData.units;
}, false);
xhr.addEventListener("error", function(err){
alert("Could not complete the request");
}, false);
xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getlocationandweather.php?owapikey=e2db5b0453a25a492e87ad8b03046a7c&units=metric", true);
xhr.send();
}
else{
alert("Unable to fetch the location and weather data.");
}
}
function loadBackground(lat, lon, weatherTag) {
var script_element = document.createElement('script');
script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=1452866c8cea54acd0075022ef573a07&lat=" + lat + "&lon=" + lon + "&accuracy=1&tags=" + weatherTag + "&sort=relevance&extras=url_l&format=json";
document.getElementsByTagName('head')[0].appendChild(script_element);
}
function jsonFlickrApi(data){
if (data.photos.pages > 0){
//var randomPhotoId = parseInt(data.photos.total);
var photo = data.photos.photo[Math.floor(Math.random()*parseInt(data.photos.photo.length))];
document.querySelector("body").style.backgroundImage = "url('" + photo.url_l + "')";
document.querySelector("#image-source").setAttribute("href", "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id);
}
else{
document.querySelector("body").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')";
document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/");
}
}
function translateDescription(description) {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=pt&dt=t&q=" + description, false);
xhttp.send();
var response = JSON.parse(xhttp.responseText);
return response[0][0][0];
}
getLocationAndWeather();body {
height: 100%;
margin: 0;
padding: 0;
font-family:Arial, sans-serif;
font-size: 2em;
text-shadow: 0 0 10px #000;
color: #fff;
background: #888;
bacground-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section {
min-height: 100%;
}
h1 {
font-size: 2em;
padding: 0 0.3em;
line-height: 1em;
}
p {
padding: 0 1em;
}
a{
color: #fff;
}
footer {
position: absolute;
bottom: 0;
font-size: 0.5em;
}
#temperature {
text-decoration: none;
border-bottom: 0.05em dotted white;
}<section>
<h1 id= "city">Weather Web App</h1>
<p> <a id="temperature" href="#" onclick="switchUnits(); return false;" title ="Click to switch between metric and impreial units"></a><span id = "weather"> by Shazam (tutorial from @fourtonfish)</p>
</section>
<footer>
<p>Powered by <a href="http://flickr.com/services/api/">Flickr</a> and <a href="http://openweathermap.org">Openweathermap.org</a>.
Created by <a href="https://twitter.com/steelcitycoach">@steelcitycoach</a>. <a id="image-source" href="#">Image source</a>.</p>
</footer>
这是与API建立连接的php文件。
<?php
if (isset($_REQUEST["owapikey"]) && isset($_REQUEST["units"])){
$ip = $_SERVER['REMOTE_ADDR'];
$owapikey = $_REQUEST['owapikey'];
$units = $_REQUEST['units'];
// $request = json_decode(file_get_contents("http://smart-ip.net/geoip-json/{$ip}"));
$latitude = $request->latitude;
$longitude = $request->longitude;
$request = json_decode(file_get_contents("http://ip-api.com/json/{$ip}"));
$latitude = $request->lat;
$longitude = $request->lon;
$request = json_decode(file_get_contents("http://api.openweathermap.org/data/2.5/weather?lat={$latitude}&lon={$longitude}&units={$units}&APPID={$owapikey}"));
$weather = array(
"latitude" => $latitude,
"longitude" => $longitude,
"city" => $request->name,
"weather" => array(
"simple" => $request->weather[0]->main,
"description" => $request->weather[0]->description,
"temperature" => $request->main->temp
),
"source" => "smart-ip.net, openweathermap.org"
);
header('Content-type: application/json');
echo json_encode($weather);
}
else{
echo "<!doctype html><html><head><style>body{font-family:Arial, sans-serif;}</style></head><body><h1>Hello</h1><p>This is a wrapper service for <a href='http://smart-ip.net/'>smart-ip.net</a> and <a href='http://openweathermap.org/'>openweathermap.org</a> that I made for a <a href='https://fourtonfish.makes.org/thimble/make-your-own-web-mashup'>tutorial on web mashups</a>.</p><p><a href='http://fourtonfish.com/'>Back to the main page.</a></body></html>";
}
?>
这说明了我的目标：
a）天气晴朗，没有云 - 出去散步！
B）天气很重且多雨 - 呆在家里！
我正在学习PHP，知道一点Javascript而且关于JSON的知识太少了。我怎么能做这个变化，并且文件？ （例如，在API链接PHP或索引上）。我想我可以做这样的事情，但它不起作用......
if（$ resultado1 ==＆＃39; clear sky＆＃39;）{echo＆＃34; Resposta 1＆＃34 ;; }