Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.02.2018, 20:37
Профессор
Отправить личное сообщение для spinastr Посмотреть профиль Найти все сообщения от spinastr
 
Регистрация: 02.05.2016
Сообщений: 390

Как вывести свои иконки погоды?
Здравствуйте!

Подскажите как вывести иконки погоды? Свои или с яндекса?

Использовал готовый скрипт от сюда

Документация тут на английском

Мой скрипт немного переделан под нужды сайта

$(document).ready(function() {
 $('#town').html("город");
 $('#country').html("область.");

 // OpenWeatherMap API request.
 var url = '//api.openweathermap.org/data/2.5/weather';

 $.getJSON(url, {
 q: "Ryazan", 
 units: "metric",
 lang:"RU",
 APPID: "2bae515a0124fef864cf38e0f2986b32"
 }, function(returnedData) {
 
 $('#celsius').html((returnedData.main.temp).toFixed(1) + ' °C');
 $('#celsius2').html((returnedData.main.temp).toFixed(1) + ' °C');
 // Convert Celsius to Fahrenheit.
 $('#fahrenheit').html((returnedData.main.temp * 1.8 + 32).toFixed(1) + ' °F');
 // Toggle between Celsius and Fahrenheit.
 $("#toggle2").click(function() {
 $(".toggler2").toggle();
 });
 $('#wind-humidity').html(returnedData.main.humidity + " %" + " вла");
 $('#wind-deg').html(returnedData.wind.deg + ' мм');
 $('#wind').html(returnedData.wind.speed + " м/с");
 $('#description').html(returnedData.weather["0"].description);
 }).fail(function() {
 console.log("error");
 });

});


Как вывести иконку примерно так я в js полный ноль. В скрипте выводится погода текстом, там как то нужно переключить или что то добавить, подскажите что нужно сделать?

Ответить с цитированием
  #2 (permalink)  
Старый 28.02.2018, 20:40
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Нужно картинку и температуру?
Ответить с цитированием
  #3 (permalink)  
Старый 28.02.2018, 20:49
Профессор
Отправить личное сообщение для spinastr Посмотреть профиль Найти все сообщения от spinastr
 
Регистрация: 02.05.2016
Сообщений: 390

j0hnik,

да в один блок, у меня в панель выводится в блок температурв

<span class="lead toggler" id="celsius2"></span>


вот пример



там без картинки
Ответить с цитированием
  #4 (permalink)  
Старый 28.02.2018, 20:55
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

таки разобрались с курсом валют я смотрю.
Ответить с цитированием
  #5 (permalink)  
Старый 28.02.2018, 21:22
Профессор
Отправить личное сообщение для spinastr Посмотреть профиль Найти все сообщения от spinastr
 
Регистрация: 02.05.2016
Сообщений: 390

j0hnik,

Да мне хорошие люди помогли)
Ответить с цитированием
  #6 (permalink)  
Старый 28.02.2018, 21:39
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,007

список возможных иконок - http://openweathermap.org/weather-conditions
можешь их иконки взять, можешь свои добавить с теми же именами (01d.png и т.д.)

returnedData.weather["0"].icon - вот имя файла, надо только слева путь присобачить, а справа ".png"
Ответить с цитированием
  #7 (permalink)  
Старый 28.02.2018, 21:42
Профессор
Отправить личное сообщение для spinastr Посмотреть профиль Найти все сообщения от spinastr
 
Регистрация: 02.05.2016
Сообщений: 390

Alexandroppolus,
Сообщение от Alexandroppolus
returnedData.weather["0"].icon - вот имя файла, надо только слева путь присобачить, а справа ".png"
Как точно это сделать? И куда вставить? Я наверно свои картинки сделаю как в мозиле выше фото есть.

Подскажите я плохо js знаю
Ответить с цитированием
  #8 (permalink)  
Старый 28.02.2018, 21:44
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

spinastr,
https://codepen.io/anon/pen/RQvPPR

просто по удалял ненужные блоки
Ответить с цитированием
  #9 (permalink)  
Старый 28.02.2018, 22:16
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,007

spinastr,
ну, например, твои иконки png лежат в папке "/images/weather"

тогда url иконки будет
var url = '/images/weather/' + returnedData.weather["0"].icon + '.png'

втыкаешь его в elem.style.backgroundImage и она рисуется на экране, юзер счастлив
Ответить с цитированием
  #10 (permalink)  
Старый 01.03.2018, 01:56
Профессор
Отправить личное сообщение для spinastr Посмотреть профиль Найти все сообщения от spinastr
 
Регистрация: 02.05.2016
Сообщений: 390

j0hnik,

тая я про бывал, но нету иконок

https://pp.userapi.com/c840330/v8403...AF_BM8aSCs.jpg
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вывести значение формулы в <div> Андрей Есипович Элементы интерфейса 2 14.09.2016 16:26
Как вывести баннер при помощи JavaScript? FRILITE Общие вопросы Javascript 4 23.03.2016 05:18
Как вывести информацию JS d теге HTML? bsa1977 Общие вопросы Javascript 1 22.03.2016 23:05
Как приплюсовать 3 inputa и вывести, сообщение. ainur777 Элементы интерфейса 2 10.11.2013 15:33
Как вывести данные из PHP Sherminator Events/DOM/Window 2 07.08.2012 20:11