Приложение на 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 часа + конвертер валют. Посмотреть его описание можно в конце статьи (там много важных изменений), ссылка на которую выше. А посмотреть его в работе можно здесь: