<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/fh-weather.js"></script>
<link rel="stylesheet" href="css/weather-icons.min.css">
<link rel="stylesheet" href="css/weather-icons-wind.min.css">
<script>
$('.fh-previsao-tempo').fhwheather({
unit: 'c', //'c' para celsius, 'f' para farenheight
timeout: 30 //Tempo de atualização em segundos
});
</script>
OBS: Configure atributo data-woeid="" de acordo com o woeid da cidade, o woeid de cada cidade pode ser encontrado no site http://woeid.rosselliot.co.nz/
<div class="fh-previsao-tempo" data-woeid="458150">
<h1 data-tempo="cidade"></h1>
<div><span data-tempo="temperatura"></span> Graus</div>
<div data-tempo="icone"></div>
<div><span data-tempo="descricao"></span></div>
<div>Temperatura Máxima: <span data-tempo="maxima"></span> Graus</div>
<div>Temperatura Mínima: <span data-tempo="minima"></span> Graus</div>
<div data-tempo="data-completa"></div>
<div>Dia: <span data-tempo="dia"></span></div>
<div data-tempo="dia-semana"></div>
<div data-tempo="dia-mes"></div>
<h2>Próximos dias da semana</h2>
<ol>
<li>
<div><span data-tempo="temperatura-1"></span> Graus</div>
<div data-tempo="icone-1"></div>
<div><span data-tempo="descricao-1"></span></div>
<div>Temperatura Máxima: <span data-tempo="maxima-1"></span> Graus</div>
<div>Temperatura Mínima: <span data-tempo="minima-1"></span> Graus</div>
<div data-tempo="data-completa-1"></div>
<div>Dia: <span data-tempo="dia-1"></span></div>
<div data-tempo="dia-semana-1"></div>
<div data-tempo="dia-mes-1"></div>
</li>
<li>
<div><span data-tempo="temperatura-2"></span> Graus</div>
<div data-tempo="icone-2"></div>
<div><span data-tempo="descricao-2"></span></div>
<div>Temperatura Máxima: <span data-tempo="maxima-2"></span> Graus</div>
<div>Temperatura Mínima: <span data-tempo="minima-2"></span> Graus</div>
<div data-tempo="data-completa-2"></div>
<div>Dia: <span data-tempo="dia-2"></span></div>
<div data-tempo="dia-semana-2"></div>
<div data-tempo="dia-mes-2"></div>
</li>
<li>
<div><span data-tempo="temperatura-3"></span> Graus</div>
<div data-tempo="icone-3"></div>
<div><span data-tempo="descricao-3"></span></div>
<div>Temperatura Máxima: <span data-tempo="maxima-3"></span> Graus</div>
<div>Temperatura Mínima: <span data-tempo="minima-3"></span> Graus</div>
<div data-tempo="data-completa-3"></div>
<div>Dia: <span data-tempo="dia-3"></span></div>
<div data-tempo="dia-semana-3"></div>
<div data-tempo="dia-mes-3"></div>
</li>
<li>
<div><span data-tempo="temperatura-4"></span> Graus</div>
<div data-tempo="icone-4"></div>
<div><span data-tempo="descricao-4"></span></div>
<div>Temperatura Máxima: <span data-tempo="maxima-4"></span> Graus</div>
<div>Temperatura Mínima: <span data-tempo="minima-4"></span> Graus</div>
<div data-tempo="data-completa-4"></div>
<div>Dia: <span data-tempo="dia-4"></span></div>
<div data-tempo="dia-semana-4"></div>
<div data-tempo="dia-mes-4"></div>
</li>
</ol>
</div>
data-tempo="temperatura" -> Temperatura
data-tempo="maxima" -> Temperatura máxima
data-tempo="minima" -> Tempera minima
data-tempo="dia" -> Número do dia do mes, exemplo 21
data-tempo="icone" -> Icone do tempo atual
data-tempo="descricao" -> Exibe um texto informando o estado do tempo, por exemplo: ensolarado, nublado, etc
data-tempo="dia-mes" -> Exibe o número do dia seguido do nome do mês, por exemplo: 21 Janeiro
data-tempo="dia-semana" -> Exibe o nome do dia da semana. por exemplo Sexta-Feira
data-tempo="dia-semana-abreviado" -> Exibe o nome do dia da semana abreviado. por exemplo Seg
data-tempo="data-completa" -> Exibe a data completa no formato: Quinta-Feira, 21 Janeiro
data-tempo="cidade" -> Exibe o nome da cidade atual
data-tempo="humidade" -> Humidade do ar
data-tempo="pressao" -> Pressão atmosférica
data-tempo="visibilidade" -> Visibilidade
data-tempo="elevação" -> Elevação
data-tempo="velocidade-vento" -> Velocidade do vento
data-tempo="unidade-velocidade" -> Unidade usada para medir a velocidade
data-tempo="unidade-distancia" -> Unidade para medir distancias
data-tempo="unidade-pressao" -> Unidade para medir pressao
data-tempo="unidade-temperatura" -> Unidade para medir temperatura
Para prever os próximos dias, basta acrescentar um indice ao valor do atributo desejado, por exemplo:
data-tempo="temperatura-1" -> Temperatura de amanha
data-tempo="temperatura-2" -> Temperatura daqui há 2 dias
data-tempo="temperatura-3" -> Temperatura daqui há 3 dias
data-tempo="temperatura-4" -> Temperatura daqui há 4 dias
OBS:O indice limite para previsão dos próximos dias é 4, sendo assim, so é possivel prever os próximos 4 dias.
Todos os valores dos atributos podem receber um indice, com excessão de:
data-tempo="humidade", data-tempo="pressao", data-tempo="visibilidade", data-tempo="elevação", data-tempo="velocidade-vento", data-tempo="unidade-velocidade", data-tempo="unidade-distancia", data-tempo="unidade-pressao", data-tempo="unidade-temperatura"
Weather Icons https://erikflowers.github.io/weather-icons/
FH Weather para jQuery é distribuído gratuitamente sob os termos de um estilo MIT licença .
Nota de direitos autorais e aviso de permissão devem ser incluídos em todas as cópias ou partes substanciais do Software.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent