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

Question

[yura_89]

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

можете подсказать, как это лучше сделать? может какой-то jquery плагин есть?

Comments

[Anton Filippov]

дернуть данные по апишке

Answer 1

[Henry Chinasky]

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");
        }
    });
  });

Comments

[profesor08]

мерзкий API. неудобный.

[Максим Тимофеев]

profesor08, есть другой?

[profesor08]

Максим Тимофеев, я не находил и сам этим пользуюсь, но его неудобство это не отменяет, причем документация мягко говоря слаба и местами недостоверна.