Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Renisio Braulio

simbolo de previsão do tempo não esta aparecendo

Por , em Javascript

Recommended Posts

Renisio Braulio    0

Renisio Braulio
Postado

ola pessoal tudo bem? estou com uma pequena dificuldade aqui. pequi um código desse site http://codepen.io/shtil80/pen/KdpEpa

que mostra o clima da cidade de onde ele esta acessando a pagina, como vocês podem ver, mas quando eu transcrevo o código tudo

aparece certinho, a unica coisa que não esta aparecendo é o desenho do sol ou nuvem dependendo das condições climáticas da sua cidade, vocês podem me ajudar para que apareça da mesma forma como esta mostrando no link?

 

 

<!DOCTYPE html>
<html lang="br">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<style>
body {
/*background: url(https://drive.google.com/uc?export=download&id=0B41DdgPqKzCacHBEamd3Q2ZpYTA) no-repeat center center fixed;*/
background-size: cover;
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}

body h1 {
background: rgba(255, 153, 0, 0.8);
color: #fff;
display: inline-block;
padding: 17px;
}

.jumbotron {
text-align: center;
}

.container {
display: inline-block;
margin: auto;
}

.blockHead {
background: rgba(255, 153, 0, 0.8);
text-align: left;
}

.blockHead p {
color: #fff;
font-size: 18px;
font-weight: 800;
margin: 0;
padding: 14px 20px;
text-transform: uppercase;
}

.blockBody {
background: rgba(255, 153, 0, 0.5);
color: #fff;
margin: 0;
padding: 0;
text-align: left;
}

.blockBody #location {
font-size: 18px;
font-weight: 500;
margin: 0;
padding: 14px 20px;
}

#owm-temp {
display: inline-block;
font-size: 100px;
font-weight: 800;
margin: 0;
padding: 0 20px;
vertical-align: top;
}

.additional {
display: inline-block;
padding: 0 20px;
vertical-align: top;
}

.icon-block {
display: inline-block;
padding: 0 20px;
}

#owm-icon {
font-size: 80px;
}

.wind-block {
display: inline-block;
padding: 0 20px;
}

#owm-wind-icon {
font-size: 80px;
}

</style>
<body>
<title>Local Weather</title>
<div class="jumbotron">

</div>
<div class="jumbotron">
<div class="container">
<div class="blockHead">
<p>Today</p>
</div>
<div class="blockBody">
<p id="location"></p>
<p id="owm-temp"></p>
<div class="additional">
<p id="owm-temp-max">Maxima: <span></span></p>
<p id="owm-temp-min">MINIMA: <span></span></p>
<p id="owm-humidity"><i class="wi wi-humidity"></i> <span></span></p>
</div>
<div class="icon-block">
<i id="owm-icon"></i>
<p id="owm-description"></p>
</div>
<div class="wind-block">
<p><i id="owm-wind-icon"></i></p>
<p id="owm-wind-speed"></p>
</div>
</div>
</div>
</div>

<script>
var owmApiKey = 'a5fa6deab88fe51ae1f33c01dfe97ab2';
var owmUrl = 'http://api.openweathermap.org/data/2.5/weather?callback=?';
var owmDailyUrl = 'http://api.openweathermap.org/data/2.5/forecast/daily?callback=?';
var fCountries = ['BS', 'BZ', 'KY', 'PW', 'US', 'PR', 'AS'];

$(document).ready(function() {
$.ajax({
url: "http://ip-api.com/json",
success: function(response) {
var useUnits = 'metric';
if (fCountries.indexOf(response.countryCode) > 0) {
useUnits = 'imperial';
}
// $( "#location" ).html(response.city + ', ' + response.regionName);
var rawCity = response.city;
var ipCity = /[^\(]*/.exec(rawCity)[0];
$.getJSON(owmUrl,
{q: ipCity,
type: 'like',
units: useUnits,
APPID: owmApiKey})
.done(parseWeather);
$.getJSON(owmDailyUrl,
{q: ipCity,
type: 'like',
cnt: '1',
units: useUnits,
APPID: owmApiKey})
.done(parseDailyWeather);
},
dataType: 'json',
statusCode: {
429: function() {
alert( "Number of tries exceeded" );
}
}
});
});

function parseWeather(data) {
var dayTime = '-night-';
if (data.dt >= data.sys.sunrise && data.dt < data.sys.sunset) {
var dayTime = '-day-';
}
var useUnitLetter = '°C';
if (fCountries.indexOf(data.sys.country) > 0) {
useUnitLetter = '°F';
}
var owmIconStr = 'wi wi-owm' + dayTime + data.weather[0].id;
var windClass = 'wi wi-wind from-' + data.wind.deg + '-deg';
console.log(data.main.temp);
$( "body" ).css("background", "url(" + getBackground(data.weather[0].main) + ") no-repeat center center fixed");
$( "#location" ).html(data.name);
$( "#owm-temp" ).html(Math.round(data.main.temp) + useUnitLetter);
$( "#owm-humidity span" ).html(data.main.humidity + '%');
$( "#owm-icon" ).removeClass().addClass(owmIconStr);
$( "#owm-description" ).html(data.weather[0].description);
$( "#owm-wind-speed" ).html(data.wind.speed + ' m/s');
$( "#owm-wind-icon" ).removeClass().addClass(windClass);
}

function parseDailyWeather(data) {
var useUnitLetter = '°C';
if (fCountries.indexOf(data.city.country) > 0) {
useUnitLetter = '°F';
}
$( "#owm-temp-max span" ).html(Math.round(data.list[0].temp.max) + useUnitLetter);
$( "#owm-temp-min span" ).html(Math.round(data.list[0].temp.min) + useUnitLetter);
}

function getBackground(mainCondition) {
var bgUrl;
switch(mainCondition) {
case "Thunderstorm":
bgUrl = "https://drive.google.com/uc?export=download&id=0B41DdgPqKzCaaW1vVUVjRTBuX3c";
break;
case "Drizzle":
bgUrl = "https://drive.google.com/uc?export=download&id=0B41DdgPqKzCaempENF8ycUFHX2M";
break;
case "Rain":
bgUrl = "https://drive.google.com/uc?export=download&id=0B41DdgPqKzCaempENF8ycUFHX2M";
break;
case "Snow":
bgUrl = "https://drive.google.com/uc?export=download&id=0B41DdgPqKzCaWkhXU2dra1RhbTQ";
break;
case "Atmosphere":
bgUrl = "https://drive.google.com/uc?export=download&id=0B41DdgPqKzCaOWFHSGY5MUt5Qm8";
break;
case "Clouds":
bgUrl = "https://drive.google.com/uc?export=download&id=0B41DdgPqKzCacHBEamd3Q2ZpYTA";
break;
case "Extreme":
bgUrl = "https://drive.google.com/uc?export=download&id=0B41DdgPqKzCaaW1vVUVjRTBuX3c";
break;
case "Additional":
bgUrl = "https://drive.google.com/uc?export=download&id=0B41DdgPqKzCacHBEamd3Q2ZpYTA";
break;
default:
bgUrl = "https://drive.google.com/uc?export=download&id=0B41DdgPqKzCacHBEamd3Q2ZpYTA";
}
return bgUrl;
}



</script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito