Скрипт погоды / Скрипты / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 299

Количество символов:

Посмотрели: 2140 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.2 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/ioZADQ

Информация: Пользователям

Информация: Правообладателям

Теги: Ajax, Snippet, Script, html, сниппет, Bootstrap, скрипты, бутстрап, json

Поделился: aTmpl

Добавлено: 2015-12-09 в 00:35

Метка: 1582102382

⇄ ⇅

<h1>JSON Weather - Robert Khayat</h1>
 <button class="btn btn-default dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Выберите город
 <span class="caret"></span>
 </button>
 <button type="button" id="myCity" class="btn btn-default" name="button">Погода в моём городе</button>

<ul class="dropdown-inverse dropdown-menu" aria-labelledby="dropdownMenu1">
 <li><a href="#">Moscow</a></li>
 <li><a href="#">Rostow</a></li>
 <li><a href="#">Habarovsk</a></li>
 </ul>
 </div>

<hr>
<form class="form-inline" role="form">
<div class="form-group">
 <input type="text" id="customInput" name="name" class="form-control" value="" placeholder="Название города">
</div>
 <button type="button" id="customCity" class="btn btn-default" name="button">Смотреть погоду</button>
</div>
 <div class="wrapper text-center">
 <h3 id="name"></h3>
 <h3 id="temp"></h3>
 <h3 id="low"></h3>
 <h3 id="high"></h3>
 <h3 id="condition"></h3>
 </div>
</form>
</div>

</div>
</div>
</div> 
<script>
$(document).ready(function() {
 $('.dropdown-inverse li > a').click(function(e) {

startajax(this.innerHTML)

});
 $('#customCity').click(function() {
 startajax($('#customInput').val())

});
 $('#myCity').on('click', function() {
 jQuery.ajax({
 url: '//freegeoip.net/json/',
 type: 'POST',
 dataType: 'jsonp',
 success: function(location) {
 console.log(location)
 startajax(location['region_name'])

}
 });
 });

function startajax(city) {
 var city = city;
 var url = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "fl&units=imperial&appid=2de143494c0b295cca9337e1e96b00e0"

$.ajax({
 url: url,
 success: function(result) {
 $('#name').html("Город " + result.name);
 $('#temp').html("Средняя температура " + result.main.temp + '℉')
 $('#low').html("Минимальное значение " + result.main.temp_min + '℉')
 $('#high').html("Максимальное значение " + result.main.temp_max + '℉')
 $('#condition').html("Погода " + result.weather[0].description)
 }
 });
 }

});
</script>

BootstrapTema

Скрипт погоды

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0