avanesov
@avanesov
верстальщик, предприниматель

Как разместить время и погоду на сайте?

Коллеги, здравствуйте!
появилась задача разместить время и погоду на сайте, как это сделано здесь, в подвале: https://chinavisacenter.ru/visa-online/
именно без картинок, без всяких элементов, а чисто текстом.

можете подсказать, как это лучше сделать? может какой-то jquery плагин есть?
  • Вопрос задан
  • 306 просмотров
Пригласить эксперта
Ответы на вопрос 1
@yarik_gui
back & friend
ApiWeather
следующий код что реализует погоду на сайте.
Время гораздо проще разместить, там апи не объязательно :)
$.getJSON(getWeatheAPI, function(data) {

    var numberToConvertFahren = 273.15;
    var weather = data['main'];
    var temp = weather.temp - numberToConvertFahren;
    var detailsWeather = data['weather'];
    var windWeather = data['wind'];
    var degFixSvg = windWeather.deg + 90;

    $('.get-weather').html('<img src="/drupal/sites/all/themes/parallax_zymphonies_theme_pgok/images/weather-icon/' + 
      detailsWeather[0]['icon'] + '.png"  title="' + detailsWeather[0]['main'] + '" alt="' + 
      detailsWeather[0].description + '" />' + '<p>' + temp.toFixed(0) + '</p>');

    var id = ".get-weather";
    var $elem = $(id);

    $elem.on("mouseenter", function (e) {
        e.stopImmediatePropagation();
    });

    $elem.tooltip({ 
      position: {
        my: "left-20 top-100", // the "anchor point" in the tooltip element
        at: "left bottom-40", // the position of that anchor point relative to selected element
      },
      items: id, content: '<div class="weather-details"><p>Горишние Плавни</p><p>' + 
      detailsWeather[0]['description'] + '</p><p>Влажность: ' + weather.humidity + 
      '%</p><p>Ветер: ' + windWeather.speed + ' м/сек.<span class="degArrow" style="transform: rotate(' + degFixSvg + 'deg);"></span></p></div>'});

    $elem.on("click", function (e) {
        $elem.tooltip("open");
    });

    $elem.on("mouseleave", function (e) {
        e.stopImmediatePropagation();
    });
            
    $(document).mouseup(function (e) {
        var container = $(".ui-tooltip");
        if (! container.is(e.target) && 
            container.has(e.target).length === 0)
        {
            $elem.tooltip("close");
        }
    });
  });
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы