Приложение на JavaScript: проверка IP, время, погода

5 (100%) 22 vote[s]

Универсальное приложение на JavaScript, которое показывает текущую дату, день недели, время, погоду, IP адрес, город-страну, широту, долготу, индекс, интернет-провайдера.

Приложение на JavaScript с отображением теукщего времени, развернутых данных о погоде, IP, индекса, провайдера

Вот приложение на JavaScript, основанное на обработке запроса на openweathermap с получением маленького JSON-файла с текущей погодой. Вначале получаем координаты при помощи ipapi, а затем, используя эти данные, вставляем их в форму запроса на openweathermap. Здесь мы не используем Geolocation API (navigator.geolocation) , так как нам нужна более точная и полная информация об IP.

Этот Geolocation API мы будем использовать в расширенном приложении для получения данных о погоде в регионе с возможностью выбора месторасположения (см.в конце статьи).

Также используем объект Date (дата и время).

Местное время и дата

Сегодня:

Текущее время:

Погода для

Температура
Кликните по значку погоды,
чтобы изменить C на F

C°

Скорость ветра

или

Направление ветра

Атмосферное давление

Относительная влажность

Исходный код:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  

<style>
.container-fluid {
  background-color: #113d0a;
border-radius:4px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#wind, #temp, #weather, #pressure, #humidity  {
border:1px solid #b6f7ab;
border-radius: 2px;
padding:5px;
}
.data-item {
  color: #ffffff;
}
.jumbotron {
text-align:center;
}
.jumbotron,
.well {
  background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);
  color: white;
}
.row, .jumbotron {
border-radius:4px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
padding: 2%;
   
}
.copyright {
  color: #222;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                  not supported by any browser */
}

#tempMode {
  cursor: pointer;
}
</style>
</head>

<body>

<div class="container-fluid all">
 
  <div class="jumbotron">
    <h2 class="text-center" style="font-family:Open Sans;font-size:32px !important;color:#faee82;">Местное время и дата</h2>
	<p>Сегодня: <strong><span id="date" style="font-family:Open Sans;font-size:22px !important;"></span></strong></p>
    <p>Текущее время: <strong><span id="time" style="color:#ffffff;text-shadow: 0 0 5px #070707;font-family:Open Sans;font-size:22px !important;"></span></strong></p>
  </div>
  <div class="row">
    <div class="col-md-12 well" id="city">
      <h2 class="text-center" style="font-family:Open Sans;font-size:32px !important;color:#faee82;">Погода для</h2>
      <p class="text-center data-item" id="city-text"></p>
      <p class="text-center data-item" id="city-text2"></p>
     <p class="text-center data-item" id="city-text3"></p>
     <p class="text-center data-item" id="city-text4"></p>
     <p class="text-center data-item" id="city-text5"></p>
     <p class="text-center data-item" id="city-text6"></p>


      <div class="row">
        <div class="col-md-4" id="weather">
          <img src="" id="weatherImg" class="center-block">
          <h3 class="text-center data-item" id="weather-text"></h3>
        </div>
        <div class="col-md-4" id="temp">
          <h3 class="text-center" style="font-family:Open Sans;font-size:22px !important;">Температура<br><span style="font-size: 12px;">Кликните по значку погоды,<br> чтобы изменить C на F</span></h3>
          <h3 class="text-center data-item noselect"><span id="temp-text"></span> <span id="tempMode">C&deg</span></h3>
        </div>
        <div class="col-md-4" id="wind">
          <p class="text-center" style="font-family:Open Sans;font-size:32px !important;color:#81f7e8;">Скорость ветра</p>
          <p class="text-center data-item" id="wind-text" style="font-family:Open Sans;font-size:26px !important;"></p>
<p class="text-center data-item" >или</p>
		  <p class="text-center data-item" id="wind-text2" style="font-family:Open Sans;font-size:26px !important;"></p>
<p class="text-center" style="font-family:Open Sans;font-size:32px !important;color:#81f7e8;">Направление ветра</p>
          <p class="text-center data-item" id="wind-text5" style="font-family:Open Sans;font-size:26px !important;"></p>
        </div>
 <div class="col-md-4" id="pressure">
          <p class="text-center" style="font-family:Open Sans;font-size:32px !important;color:#81f7e8;">Атмосферное давление</p>
          <p class="text-center data-item" id="wind-text3" style="font-family:Open Sans;font-size:26px !important;"></p>
        </div>
<div class="col-md-4" id="humidity">
          <p class="text-center" style="font-family:Open Sans;font-size:32px !important;color:#81f7e8;">Относительная влажность</p>
          <p class="text-center data-item" id="wind-text4" style="font-family:Open Sans;font-size:26px !important;"></p>

        </div>
      </div>
 
    </div>
  </div>
  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
  <script src='https://code.jquery.com/ui/1.11.4/jquery-ui.js'></script>
  <script>

  //необходимые глобальные переменные для кеширования селектора.
var $tempMode = $("#tempMode");
var $tempText = $("#temp-text");
var $windText = $("#wind-text");
var $windText2 = $("#wind-text2");
var $windText3 = $("#wind-text3");
var $windText4 = $("#wind-text4");
var $windText5 = $("#wind-text5");
//$(document).ready(function() {
  

  // эта функция берет температуру из обработчика данных и отображает температуру в соответствии с правильной единицей измерения температуры, а также отображает температуру теплой или холодной.
  function formatTemperature(kelvin) {
    
    
    var clicked = false;
    var fahr = ((kelvin * 9 / 5) - 459.67).toFixed(0);
    var cels = (kelvin - 273.15).toFixed(1);
    //инициация индикации температуры
    $tempText.html(cels);

    var firstClick = false;
    //щелкните обработчик, чтобы обновить единицу измерения температуры.
    $tempMode.off("click").on("click", function() {
      firstClick = true;
      console.log(clicked);
      clicked === false ? clicked = true : clicked = false;
      clicked === true ? $tempMode.html("F&deg") : $tempMode.html("C&deg") ;
      if (clicked) {
	  $tempText.html(fahr);
        
      } else
        $tempText.html(cels);
    });

    if (cels > 24) {
      $("#temp-text").css("color", "red");
    } else if (cels < 18) {
      $("#temp-text").css("color", "blue");
    }
  }
  //обрабатывает данные ответа и форматирует их соответствующим образом, поскольку это асинхронный объект ответа, вся обработка и форматирование данных должны выполняться в этой функции.
  
  function dataHandler(data) {
    dataString = JSON.stringify(data);
    console.log(data.main.temp);
    formatTemperature(data.main.temp);
    if (data.main.temp && data.sys) {
      // отображение иконки
      if (data.weather) {
        var imgURL = "https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
        $("#weatherImg").attr("src", imgURL);
        $("#weather-text").html(data.weather[0].description);
      }
      // скорость ветра
      if (data.wind) {
        var knots = data.wind.speed;
        $windText.html(knots.toFixed(1) + " М/С");
        var knots2 = data.wind.speed * 1.9438445;
	    $windText2.html(knots2.toFixed(1) + " Узлов");
      }
	  if (data.main) {
        var hum2 = data.main.pressure;
		var mm = (data.main.pressure * 0.75006).toFixed(0);
        $windText3.html(mm + " мм.рт.ст.");
    }
if (data.main) {
        var hum3 = data.main.humidity;
        $windText4.html(hum3 + " %");
    }
//определяем направление ветра
 if (data.main) {
        var hum4 = data.wind.deg;
           if (hum4=>0 && hum4<22.5) {
               $windText5.html("N (North)");
               }
           if (hum4=>22.5 && hum4<67.5) {
               $windText5.html("N-E (Northeastern)");
               }
           if (hum4=>67.5 && hum4<112.5) {
               $windText5.html("E (Eastern)");
               }
           if (hum4=>112.5 && hum4<157.5) {
               $windText5.html("S-E (Southeastern)");
               }
           if (hum4=>157.5 && hum4<202.5) {
               $windText5.html("S (South)");
               }
           if (hum4=>202.5 && hum4<247.5) {
               $windText5.html("S-W (Southwest)");
               }
           if (hum4=>247.5 && hum4<292.5) {
               $windText5.html("W (West)");
               }
           if (hum4=>292.5 && hum4<337.5) {
               $windText5.html("N-W (Northwest)");
               }
           if (hum4=>337.5) {
               $windText5.html("N (North)");
               }			   
    }  console.log(hum4); 	
  }
}
  function getWeather(locdata) {
    console.log("getWeather has been called.")
    var lat = locdata.latitude;
    var lon = locdata.longitude;
	
    var apiURI = "https://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=5b58aee62c41eb64fcab16edce2e5cc1";
//выводим данные IP
    if (locdata){ 
      console.log("success");
      $("#city-text").html(locdata.city );
      $("#city-text2").html(locdata.country_name);
      $("#city-text3").html(" Индекс: " + locdata.postal);
      $("#city-text4").html(" Широта: " + locdata.latitude + " Долгота: " + locdata.longitude);
      $("#city-text5").html(" IP: " + locdata.ip);
      $("#city-text6").html(" Провайдер: " + locdata.org);
    } else {
    console.log("fail");
    }

    //делаем запрос на данные о погоде
    console.log("success getWeather");
    console.log(apiURI);
    return $.ajax({
      url: apiURI,
      dataType: "jsonp",
      type: "GET",
      async: "true",
    }).done(dataHandler);

  }

  var counter = 0;

  function getLocation() {
    console.log("Update# " + counter++);
    
    //делаем запрос на локализацию устройства
    return $.ajax({
      url: "https://ipapi.co/jsonp/",
      dataType: "jsonp",
      type: "GET",
      async: "true",
    });
  }

    
  var updateInterval = setInterval(getLocation().done(getWeather), 300000);
//});

 function showDateTime() {
            var now = new Date();
            date.textContent = `${now.toLocaleDateString("ru-ru", { day: "numeric", month: "long" })} ${now.getFullYear()} года, `
                + now.toLocaleDateString("ru-ru", { weekday: "long" });
            time.textContent = correctTime(now);
        }
        showDateTime();
        setInterval(showDateTime, 1000);
 
        let stopwatchId, stopwatch_ms,
            timerId, timer_ms;
                                 
        // Общая функция корректного отображения времени. 
        function correctTime(time) {
            let h = time.getHours(),
                m = time.getMinutes(),
                s = time.getSeconds();
            return `${(h < 10 ? "0" : "") + h}:${(m < 10 ? "0" : "") + m}:${(s < 10 ? "0" : "") + s}`;
        } 
        // В Opera отображение ведущего нуля часов глючит в Intl.
        function correctTimeIntl(time) {
            let format = Intl.DateTimeFormat("ru-ru", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
            return format.format(time);
        }  
  </script>
</body>
</html>

Приложение использует API openweathermap и ipapi для получения данных IP.

Приложение на JavaScript проверка любого IP

А вот приложение, в котором можно проверить любой IP адрес при помощи все того же сервиса ipapi (вставляете любой IP и получаете его геолокацию). В нем использована форма input, получение значения text (см. пример в статье «Добавление интерактивности на страницу при помощи JS«), формирование и отправка запроса. Также добавлен обработчик ошибок при некорректном вводе, кнопки с подключенными событиями «onclick».

Простая проверка IP с использованием сервиса ipapi

Если поле оставить пустым, получите текущий IP Вашего устройства
Введите IP для проверки:

Исходный код html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <style>
 #forma, #theForm {
   font-family: Open Sans;
   border-radius:4px;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   background: radial-gradient(ellipse at top, #e66465, transparent),
              radial-gradient(ellipse at bottom, #4d9f0c, transparent);
   background-repeat: no-repeat;
   padding:20px;			  
  }
 #forma {
 width:80%;
 margin-left:auto;
 margin-right:auto;
 }
#theForm {
   width:60%;
   margin-left:auto;
   margin-right:auto;
  }
input[type=text] {
    width: 90%;
    padding: 12px 20px;
    margin-left: 5%;
    box-sizing: border-box;
	font-size:22px;
  }
input[type=text]:focus {
  background-color: lightblue;
  }
.knopki {
 text-align:center;
} 
#btn, #btn1 {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
#ta {
text-align:center;
}
  </style>
</head>
<body onload="validateName()">
<div id="forma">
  <p style="font-size:26px;color:white;text-align:center;text-shadow: 1px 1px 2px black, 0 0 1em #ffffff;">Простая проверка IP с использованием сервиса  ipapi</p>
  <p style="font-size:20px;color:yellow;text-align:center;">Если поле оставить пустым, получите текущий IP Вашего устройства</p>

<form id="myForm">
  <input type="text" 
         name="nom" 
         maxlength="64" 
         required 
		 id="id"/>
</form>

<div class="knopki">
  <button id="btn" onclick = "validateName()">Проверить</button>
  <button id="btn1">Очистить</button>
</div>

  <p>
     <span id="nameTyped4"></span>
  </p>


<div id="ta">
     <p class="text-center data-item" id="text" style="font-size:22px;color:red;text-align:center;"></p>
     <p class="text-center data-item" id="text2"></p>
     <p class="text-center data-item" id="text3"></p>
     <p class="text-center data-item" id="text4"></p>
     <p class="text-center data-item" id="text5"></p>
     <p class="text-center data-item" id="text6"></p>
</div>
</div> 
  <script>    
function validateName(text) {
  var name = document.forms["myForm"]["nom"].value;   
  var URL = "https://ipapi.co/"+name+"/jsonp/";
   $.ajax({
      url: URL,
	  data: name,
      dataType: "jsonp",
      type: "GET",
      async: "true",
	  success:  function(locdata,xhr) {
                   if (locdata){ 
                    console.log("success");
                    $("#text").html(locdata.city );
	                console.log(locdata.city );
                    $("#text2").html(locdata.country_name);
                    $("#text3").html(" Индекс: " + locdata.postal);
                    $("#text4").html(" Широта: " + locdata.latitude + " Долгота: " + locdata.longitude);
                    $("#text5").html(" IP: " + locdata.ip);
                    $("#text6").html(" Провайдер: " + locdata.org);
                } 
				  if((locdata.error == true)){
	                let div = document.querySelector('#ta');
                    div.innerHTML = '<p class="text-center data-item" id="text" style="font-size:22px;color:red;text-align:center;">Пожалуйста, введите корректный IP!!!</p><p class="text-center data-item" id="text2"></p><p class="text-center data-item" id="text3"></p><p class="text-center data-item" id="text4"></p><p class="text-center data-item" id="text5"></p><p class="text-center data-item" id="text6"></p>'; 
	                {
					alert('Ошибка!!!')
					};
	            }
		 
        },
      error: function(jqXHR, exception)
             {
              if (jqXHR.status === 0) {
                alert('НЕ подключен к интернету!');
             } else if (jqXHR.status == 404) {
                alert('НЕ найдена страница запроса [404])');
             } else if (jqXHR.status == 500) {
                alert('НЕ найден домен в запросе [500].');
             } else if (exception === 'parsererror') {
                alert("Ошибка в коде: \n"+jqXHR.responseText);
             } else if (exception === 'timeout') {
                alert('Не ответил на запрос.');
             } else if (exception === 'abort') {
                alert('Прерван запрос Ajax.');
             } else {
                alert('Неизвестная ошибка:\n' + jqXHR.responseText);
             }
        }
    });

  var output = document.querySelector('#nameTyped4');
  output.innerHTML = "Вы ввели: " + name;
}
 $("#btn1").click(function(){
    $("#myForm")[0].reset();
});
  </script>
</body>
</html>

Посмотрите более функциональный вариант приложения (кликните по картинке, откроется в новой вкладке), в которое «запихнуты» такие плюшки : текущее местное время, календарь на все годы с праздниками, использование более объемного запроса на openweathermap forecast для вывода прогноза погоды на 3 дня, возможностью выбора любого другого города мира с показом погоды, отображением текущего местоположения на карте (см. «Карты и геолокация: примеры использования бесплатных API с открытым исходным кодом«):

Далее — пример приложения с наиболее удачной реализации OpenWeather forecast и ещё один вариант с графиками. В них прогноз выводится на 4 дня, вывод минимальной и максимальной температуры (в фиксированное время: min в 03.00 ночи, max — в 12.00 каждого следующего дня). Кроме того, в приложение добавлен конвертер валют (подробнее реализацию приложения-конвертера см. в отдельной статье на сайте). Приложение конвертирует сумму, вводимую пользователем в верхней строке каждого поля направления конвертации. Просто вводите исходную сумму в верхнее поле и сразу в нижнем поле получите сумму в результате конвертации.

Скачать исходный код приложения.

Статья и описание приложения с исходным кодом (плюс приложение с наличным курсом ПриватБанка и курса 20 других валют).

Приложение только с прогнозом погоды на 4 дня с поиском любого города мира

Это приложение включает возможность поиска любого города мира по названию на любом языке через поле ввода, либо выбор города из предложенного выпадающего списка.

Приложение прогноз погоды

Описание и возможность скачать см. в этой статье.

Приложение на JS с почасовым прогнозом погоды на 4 дня, выбором города, показом карты и конвертером валют

Заканчивая тему работы с API openweather forecast, мы расширили предыдущее приложение, максимально использовав данные, получаемые c API openweather forecast, добавили множество плюшек, а именно вывод прогноза на каждые 3 часа + конвертер валют. Посмотреть его описание можно в конце статьи (там много важных изменений), ссылка на которую выше. А посмотреть его в работе можно здесь:

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 2209

Hosting Ukraine

FolkWindows

Случайный выбор

Популярные записи