HTML5 градусник (погода в городах России)

1997

Библиотека JAVASCRIPT SE@RCHER

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. АПРЕЛЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>HTML5 градусник </title>
<style type="text/css">
#thermometer-wrapper{   background-image: url('background.svg');   background-repeat: no-repeat;   position: relative;   height: 300px;   width: 75px;   float: left;   margin: 0em 1em 1em 0em;   -ms-background-size: cover;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover;}
#thermometer
{   position: absolute;   transform: rotate(-90deg);   -ms-transform: rotate(-90deg);   -webkit-transform: rotate(-90deg);   -o-transform: rotate(-90deg);   -moz-transform: rotate(-90deg);}
#labels{   text-align: right;}
.thermometer-label{   display: block;   line-height: 1;}
#request{   clear: both;   margin-top: 1em;}
#city,#temperature{   font-weight: bold;font-size:120%; color:green;}
#error{   color: red;   display: block;}
meter div.meter-frame {  height: 1em;  width: 100%;  border: 1px solid #000000;  background-color: #FFFFFF;}
meter div.meter-bar {  height: 1em;  border: none;  background-color: #B1241B;}
body {margin: 30px auto;}
.table{display: table; border: 0px solid black; margin: 16px; padding: 0px;width:800px}
.caption{display: table-caption; border: 0px solid black}
.cell{display: table-cell; border: 1px solid black;vertical-align: top;}
.row{display: table-row; border: 0px solid black;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
$(function(){
  document.createElement('meter');
  var updatePolyfill = function(meterElem, meterBarDiv) {
    var params = $([($(meterElem).attr('min') || '0'),
($(meterElem).attr('max') || '1.0'),
  $(meterElem).attr('value'),
  ($(meterElem).attr('high') || ($(meterElem).attr('max') || '1.0')),
  ($(meterElem).attr('low') || ($(meterElem).attr('min') || '0')),
  $(meterElem).attr('optimum')]).map(function() {
      if (/^\-?\d+(?:\.\d+)?$/.test(this)) {
	return parseFloat(this);
      }
    }).get();
    var min = params[0];
    var max = params[1];
    var val = params[2];
    var high = params[3];
    var low = params[4];
    var optimal = params[5];
    if (val > max) val = max;
    if (val < min) val = min;
    var amt = ((val - min) / (max - min)) * 100.0;
    if (val > high) {
      $(meterBarDiv).addClass('meter-high');
    } else if (val < low) {
      $(meterBarDiv).addClass('meter-low');
    }
    if (val == optimal) {
      $(meterBarDiv).addClass('meter-optimal');
    }
    meterBarDiv.style.width = amt + "%";
  };
  $('meter').each(function(index) {
    var meterFrameDiv = document.createElement('div');
    var meterBarDiv = document.createElement('div');
    meterFrameDiv.appendChild(meterBarDiv);
    $(meterFrameDiv).addClass('meter-frame');
    $(meterBarDiv).addClass('meter-bar');
    updatePolyfill(this, meterBarDiv);
    this.appendChild(meterFrameDiv);
    $(this).bind("DOMAttrModified", function(event) {
     updatePolyfill(this, meterBarDiv);
    });
  });
});
function setThermometerPosition()
{
   var thermometer = jQuery('#thermometer');
   var max = parseFloat(thermometer.attr('max'));
   var min = parseFloat(thermometer.attr('min'));
   var step = 10;
   var margin = 0;
   var wrapper = jQuery('#thermometer-wrapper');
   var labels = jQuery('#labels');
   thermometer.width(0.9 * wrapper.height());
   thermometer.css('bottom', ((wrapper.height() - thermometer.height()) / 2) + 'px');
   thermometer.css('left', (thermometer.width() - wrapper.width()) / -2);
   margin = (thermometer.width() + (parseFloat(labels.css('font-size')) / 2)) / ((max - min) / step);
   margin -=  parseFloat(labels.css('font-size'));
   createThermometerLabels(max, min, step, margin);
}
function createThermometerLabels(max, min, step, margin)
{
   var label;
   var container = jQuery('#labels');
   for(var i = max; i >= min; i -= step)
   {
      label = jQuery('<label>').addClass('thermometer-label').text(i + '°');
      label.css('margin-bottom', margin);
      container.append(label);
   }
   setLabelsPosition();
}
function setLabelsPosition()
{
   var labels = jQuery('#labels');
   labels.css('margin-top', (labels.parent().height() - labels.height()) / 2);
   labels.width((jQuery('#thermometer-wrapper').width() - $('#thermometer').height()) /2);
}
function requestWOEID(location)
{
   var query = 'select * from geo.places where text = "' + location + '"';
   jQuery.get(
      'http://query.yahooapis.com/v1/public/yql?callback=?&format=json&q=' + encodeURIComponent(query),
      function(data)
      {
         if (data.query.count == 0)
         {
            setError('Unable to retrieve data');
            return;
         }
         if (data.query.count > 1)
         {
            setError('');
            data.query.results.place = data.query.results.place[0];
         }
         var url = 'http://weather.yahooapis.com/forecastrss?u=c&w=' + data.query.results.place.woeid;
         var query = 'select * from rss where url = "' + url + '"';
         jQuery.get(
            'http://query.yahooapis.com/v1/public/yql?callback=?&format=json&q=' + encodeURIComponent(query),
            function(data)
            {
               if (data.query.results.item.condition == undefined)
               {
                  setError(data.query.results.item.title);
                  return;
               }
               var temperature = data.query.results.item.condition.temp;
               jQuery('#temperature').text(temperature + '°');
               jQuery('#thermometer').attr('value', temperature);
            },
            'json'
         );
      },
      'json'
   )
}
function requestLocation(position)
{
   new google.maps.Geocoder().geocode(
      {'location': new google.maps.LatLng(position.coords.latitude, position.coords.longitude)},
      function(results, status)
      {
         if (status == google.maps.GeocoderStatus.OK)
            jQuery('#location').attr('value', results[0].formatted_address);
         else
            setError('Unable to retrieve location');
      }
   );
}
function setError(message)
{
   jQuery('#error').text(message);
}
function resetInfo()
{
   setError('');
  jQuery('#city').text('');
   jQuery('#temperature').text(' ');
}
jQuery(document).ready(function()
{setThermometerPosition();jQuery('#request').submit(function()
{resetInfo();requestWOEID(jQuery('#location').attr('value'));jQuery('#city').text(jQuery('#location').attr('value'));return false;});jQuery('#my-position').click(function()
{resetInfo();if(!navigator.geolocation)
setError('Your browser does not support geolocation');else
{navigator.geolocation.getCurrentPosition(requestLocation,function(error)
{setError('Unable to retrieve location');},{timeout:10*1000,maximinAge:10*60*1000});}
return false;});});
</script>
</head>
<body>
<DIV class="table">
<DIV class="row">
<DIV class="cell">
<div id="thermometer-wrapper">
<meter id="thermometer" min="-50" max="50" value="0"></meter>
<div id="labels"></div>
<br>
<div style="width:240px;padding:8px;">
<label id="city"></label><label> </label><label> </label><output id="temperature" form="request" style="color:red;font-size:140%"> </output>
<label id="error"></label>
</div>
</div>
</DIV>
<DIV class="cell">
<form id="request" name="request" action="#">
<label>Город:</label>
<select name="sel" size="16" id="location">
<option  value=" Moscow"> Москва</option><option  value=" Saint Petersburg"> Санкт-Петербург</option><option  value=" Novosibirsk"> Новосибирск</option><option  value=" Yekaterinburg"> Екатеринбург</option><option  value=" Nizhny Novgorod"> Нижний Новгород</option><option  value=" Samara"> Самара</option><option  value=" Omsk"> Омск</option><option  value=" Kazan"> Казань</option><option  value=" Chelyabinsk"> Челябинск</option><option  value=" Rostov-on-Don"> Ростов-на-Дону</option><option  value=" Ufa"> Уфа</option><option  value=" Volgograd"> Волгоград</option><option  value=" Perm"> Пермь</option><option  value=" Krasnoyarsk"> Красноярск</option><option  value=" Voronezh"> Воронеж</option><option  value=" Saratov"> Саратов</option><option  value=" Krasnodar"> Краснодар</option><option  value=" Tolyatti"> Тольятти</option><option  value=" Izhevsk"> Ижевск</option><option  value=" Ulyanovsk"> Ульяновск</option><option  value=" Barnaul"> Барнаул</option><option  value=" Vladivostok"> Владивосток</option><option  value=" Yaroslavl"> Ярославль</option><option  value=" Irkutsk"> Иркутск</option><option  value=" Tyumen"> Тюмень</option><option  value=" Makhachkala"> Махачкала</option><option  value=" Khabarovsk"> Хабаровск</option><option  value=" Novokuznetsk"> Новокузнецк</option><option  value=" Orenburg"> Оренбург</option><option  value=" Kemerovo"> Кемерово</option><option  value=" Ryazan"> Рязань</option><option  value=" Tomsk"> Томск</option><option  value=" Astrakhan"> Астрахань</option><option  value=" Penza"> Пенза</option><option  value=" Naberezhnye Chelny"> Набережные Челны</option><option  value=" Lipetsk"> Липецк</option><option  value=" Tula"> Тула</option><option  value=" Kirov"> Киров</option><option  value=" Cheboksary"> Чебоксары</option><option  value=" Kaliningrad"> Калининград</option><option  value=" Bryansk"> Брянск</option><option  value=" Kursk"> Курск</option><option  value=" Ivanovo"> Иваново</option><option  value=" Magnitogorsk"> Магнитогорск</option><option  value=" Ulan-Ude"> Улан-Удэ</option><option  value=" Tver"> Тверь</option><option  value=" Stavropol"> Ставрополь</option><option  value=" Nizhny Tagil"> Нижний Тагил</option><option  value=" Belgorod"> Белгород</option><option  value=" Arkhangelsk"> Архангельск</option><option  value=" Vladimir"> Владимир</option><option  value=" Sochi"> Сочи</option><option  value=" Kurgan"> Курган</option><option  value=" Smolensk"> Смоленск</option><option  value=" Kaluga"> Калуга</option><option  value=" Chita"> Чита</option><option  value=" Oryol"> Орловская</option><option  value=" Volzhsky"> Волжский</option><option  value=" Cherepovets"> Череповец</option><option  value=" Vladikavkaz"> Владикавказ</option><option  value=" Murmansk"> Мурманск</option><option  value=" Surgut"> Сургут</option><option  value=" Vologda"> Вологда</option><option  value=" Saransk"> Саранск</option><option  value=" Tambov"> Тамбов</option><option  value=" Sterlitamak"> Стерлитамак</option><option  value=" Grozny"> Грозный</option><option  value=" Yakutsk"> Якутск</option><option  value=" Kostroma"> Кострома</option><option  value=" Komsomolsk-na-Amure"> Комсомольск-на-Амуре</option><option  value=" Petrozavodsk"> Петрозаводск</option><option  value=" Taganrog"> Таганрог</option><option  value=" Nizhnevartovsk"> Нижневартовск</option><option  value=" Yoshkar-Ola"> Йошкар-Ола</option><option  value=" Bratsk"> Братск</option><option  value=" Novorossiysk"> Новороссийск</option><option  value=" Dzerzhinsk"> Дзержинск</option><option  value=" Shakhty"> Шахты</option><option  value=" Nalchik"> Нальчик</option><option  value=" Orsk"> Орск</option><option  value=" Syktyvkar"> Сыктывкар</option><option  value=" Nizhnekamsk"> Нижнекамск</option><option  value=" Angarsk"> Ангарск</option><option  value=" Stary Oskol"> Старый Оскол</option><option  value=" Veliky Novgorod"> Великий Новгород</option><option  value=" Balashikha"> Балашиха</option><option  value=" Blagoveshchensk"> Благовещенск</option><option  value=" Prokopyevsk"> Прокопьевск</option><option  value=" Biysk"> Бийск</option><option  value=" Khimki"> Химки</option><option  value=" Pskov"> Псков</option><option  value=" Engels"> Энгельс</option><option  value=" Rybinsk"> Рыбинск</option><option  value=" Balakovo"> Балаково</option><option  value=" Severodvinsk"> Северодвинск</option><option  value=" Armavir"> Армавир</option><option  value=" Podolsk"> Подольск</option><option  value=" Korolyov"> Королев</option><option  value=" Yuzhno-Sakhalinsk"> Южно-Сахалинск</option><option  value=" Petropavlovsk-Kamchatsky"> Петропавловск-Камчатский</option><option  value=" Syzran"> Сызрань</option><option  value=" Norilsk"> Норильск</option><option  value=" Zlatoust"> Златоуст</option><option  value=" Kamensk-Uralsky"> Каменск-Уральский</option><option  value=" Mytishchi"> Мытищи</option><option  value=" Lyubertsy"> Люберцы</option><option  value=" Volgodonsk"> Волгодонск</option><option  value=" Novocherkassk"> Новочеркасск</option><option  value=" Abakan"> Абакан</option><option  value=" Nakhodka"> Находка</option><option  value=" Ussuriysk"> Уссурийск</option><option  value=" Berezniki"> Березники</option><option  value=" Salavat"> Салават</option><option  value=" Elektrostal"> Электросталь</option><option  value=" Miass"> Миасс</option><option  value=" Rubtsovsk"> Рубцовск</option><option  value=" Almetyevsk"> Альметьевск</option><option  value=" Kovrov"> Ковров</option><option  value=" Kolomna"> Коломна</option><option  value=" Maykop"> Майкоп</option><option  value=" Pyatigorsk"> Пятигорск</option><option  value=" Odintsovo"> Одинцово</option><option  value=" Kopeysk"> Копейск</option><option  value=" Khasavyurt"> Хасавюрт,</option><option  value=" Zheleznodorozhny"> Железнодорожный</option><option  value=" Novomoskovsk"> Новомосковск</option><option  value=" Kislovodsk"> Кисловодск</option><option  value=" Serpukhov"> Серпухов</option><option  value=" Pervouralsk"> Первоуральск</option><option  value=" Novocheboksarsk"> Новочебоксарск</option><option  value=" Nefteyugansk"> Нефтеюганск</option><option  value=" Dimitrovgrad"> Димитровград</option><option  value=" Neftekamsk"> Нефтекамск</option><option  value=" Cherkessk"> Черкесск</option><option  value=" Orekhovo-Zuyevo"> Орехово-Зуево</option><option  value=" Derbent"> Дербент</option><option  value=" Kamyshin"> Камышин</option><option  value=" Nevinnomyssk"> Невинномысск</option><option  value=" Krasnogorsk"> Красногорск</option><option  value=" Murom"> Муром</option><option  value=" Bataysk"> Батайск</option><option  value=" Novoshakhtinsk"> Новошахтинск</option><option  value=" Sergiyev Posad"> Сергиев Посад</option><option  value=" Noyabrsk"> Ноябрьск</option><option  value=" Shchyolkovo"> Shchyolkovo</option><option  value=" Kyzyl"> Кызыл</option><option  value=" Oktyabrsky"> Октябрьский</option><option  value=" Achinsk"> Ачинск</option><option  value=" Seversk"> Северск</option><option  value=" Novokuybyshevsk"> Новокуйбышевска</option><option  value=" Yelets"> Елец</option><option  value=" Arzamas"> Арзамас</option><option  value=" Obninsk"> Обнинск</option><option  value=" Novy Urengoy"> Новый Уренгой</option><option  value=" Kaspiysk"> Каспийск</option><option  value=" Elista"> Элиста</option><option  value=" Pushkino"> Пушкино</option><option  value=" Zhukovsky"> Жуковский</option><option  value=" Artyom"> Артем</option><option  value=" Mezhdurechensk"> Междуреченск</option><option  value=" Leninsk-Kuznetsky"> Ленинск-Кузнецкий</option><option  value=" Sarapul"> Сарапул</option><option  value=" Yessentuki"> Ессентуки</option><option  value=" Votkinsk"> Воткинск</option><option  value=" Noginsk"> Ногинск</option><option  value=" Tobolsk"> Тобольск</option><option  value=" Ukhta"> Ухта</option><option  value=" Serov"> Серов</option><option  value=" Velikiye Luki"> Великие Луки</option><option  value=" Michurinsk"> Мичуринск</option><option  value=" Kiselyovsk"> Kiselyovsk</option><option  value=" Novotroitsk"> Новотроицк</option><option  value=" Zelenodolsk"> Зеленодольск</option><option  value=" Berdsk"> Бердск</option><option  value=" Solikamsk"> Соликамск</option><option  value=" Ramenskoye"> Раменское</option><option  value=" Domodedovo"> Домодедово</option><option  value=" Magadan"> Магадан</option><option  value=" Glazov"> Глазов</option><option  value=" Kamensk-Shakhtinsky"> Каменск-Шахтинский</option><option  value=" Zheleznogorsk"> Железногорск</option><option  value=" Kansk"> Канск</option><option  value=" Nazran"> Назрань</option><option  value=" Gatchina"> Гатчина</option><option  value=" Sarov"> Саров</option><option  value=" Voskresensk"> Воскресенск</option><option  value=" Dolgoprudny"> Долгопрудный</option><option  value=" Bugulma"> Бугульма</option><option  value=" Kuznetsk"> Кузнецкий</option><option  value=" Gubkin"> Губкина</option><option  value=" Kineshma"> Кинешма</option><option  value=" Yeysk"> Ейск</option><option  value=" Reutov"> Реутов</option><option  value=" Ust-Ilimsk"> Усть-Илимск</option><option  value=" Zheleznogorsk"> Железногорск</option><option  value=" Novouralsk"> Новоуральск</option><option  value=" Usolye-Sibirskoye"> Усолье-Сибирское</option><option  value=" Chaykovsky"> Чайковский</option><option  value=" Azov"> Азов</option><option  value=" Buzuluk"> Бузулук</option><option  value=" Ozyorsk"> Озерск</option><option  value=" Balashov"> Балашов</option><option  value=" Yurga"> Юрга</option><option  value=" Kirovo-Chepetsk"> Кирово-Чепецк</option><option  value=" Kropotkin"> Кропоткин</option><option  value=" Klin"> Клин</option><option  value=" Vyborg"> Выборг</option><option  value=" Khanty-Mansiysk"> Ханты-Мансийск</option><option  value=" Troitsk"> Троицк</option><option  value=" Bor"> Бор</option><option  value=" Shadrinsk"> Шадринск</option><option  value=" Belovo"> Белово</option><option  value=" Mineralnye Vody"> Минеральные Воды</option><option  value=" Anzhero-Sudzhensk"> Анжеро-Судженск</option><option  value=" Birobidzhan"> Биробиджан</option><option  value=" Lobnya"> Лобня</option><option  value=" Chapayevsk"> Чапаевске</option><option  value=" Georgiyevsk"> Георгиевский</option><option  value=" Chernogorsk"> Chernogorsk</option><option  value=" Minusinsk"> Минусинск</option><option  value=" Mikhaylovsk"> Mikhaylovsk</option><option  value=" Yelabuga"> Елабуга</option><option  value=" Dubna"> Дубна</option><option  value=" Vorkuta"> Воркута</option><option  value=" Novoaltaysk"> Novoaltaysk</option><option  value=" Yegoryevsk"> Егорьевск</option><option  value=" Asbest"> Асбест</option><option  value=" Beloretsk"> Белорецк</option><option  value=" Belogorsk"> Белогорск</option><option  value=" Gukovo"> Гуково</option><option  value=" Stupino"> Ступино</option><option  value=" Tuymazy"> Туймазы</option><option  value=" Kstovo"> Кстово</option><option  value=" Volsk"> Вольск</option><option  value=" Ishimbay"> Ишимбайская</option><option  value=" Kungur"> Кунгур</option><option  value=" Zelenogorsk"> Зеленогорск</option><option  value=" Lysva"> Лысьва</option><option  value=" Sosnovy Bor"> Сосновый Бор</option><option  value=" Buynaksk"> Буйнакске</option><option  value=" Borisoglebsk"> Борисоглебск</option><option  value=" Ishim"> Ишим</option><option  value=" Naro-Fominsk"> Наро-Фоминск</option><option  value=" Budyonnovsk"> Буденновск</option><option  value=" Donskoy"> Донской</option><option  value=" Polevskoy"> Полевской</option><option  value=" Leninogorsk"> Лениногорск</option><option  value=" Pavlovsky Posad"> Павловский Посад</option><option  value=" Slavyansk-na-Kubani"> Славянск-на-Кубани</option><option  value=" Zarechny"> Заречный</option><option  value=" Tuapse"> Туапсе</option><option  value=" Rossosh"> Россошь</option><option  value=" Kumertau"> Кумертау</option><option  value=" Labinsk"> Лабинск</option><option  value=" Sibay"> Сибайский</option><option  value=" Klintsy"> Клинцы</option><option  value=" Rzhev"> Ржев</option><option  value=" Revda"> Ревда</option><option  value=" Tikhoretsk"> Тихорецк</option><option  value=" Neryungri"> Нерюнгри</option><option  value=" Aleksin"> Алексин</option><option  value=" Alexandrov"> Александров</option><option  value=" Dmitrov"> Дмитров</option><option  value=" Meleuz"> Мелеуз</option><option  value=" Salsk"> Сальск</option><option  value=" Lesosibirsk"> Лесосибирск</option><option  value=" Gus-Khrustalny"> Гусь-Хрустальный</option><option  value=" Chistopol"> Чистополь</option><option  value=" Pavlovo"> Павлово</option><option  value=" Chekhov"> Чехов</option><option  value=" Kotlas"> Котлас</option><option  value=" Belebey"> Белебея</option><option  value=" Iskitim"> Искитим</option><option  value=" Verkhnyaya Pyshma"> Верхняя Пышма</option><option  value=" Krasnoturyinsk"> Краснотурьинск</option><option  value=" Apatity"> Апатиты</option><option  value=" Vsevolozhsk"> Всеволожск</option><option  value=" Prokhladny"> Прохладный</option><option  value=" Mikhaylovka"> Михайловке</option><option  value=" Anapa"> Анапа</option><option  value=" Tikhvin"> Тихвин</option><option  value=" Ivanteyevka"> Ivanteyevka</option><option  value=" Svobodny"> Свободный</option><option  value=" Shuya"> Шуя</option><option  value=" Kogalym"> Когалым</option><option  value=" Shchyokino"> Shchyokino</option><option  value=" Krymsk"> Крымский</option><option  value=" Vyazma"> Вязьма</option><option  value=" Gorno-Altaysk"> Горно-Алтайск</option><option  value=" Vidnoye"> Москва</option><option  value=" Arsenyev"> Арсеньев</option><option  value=" Izberbash"> Избербаш</option><option  value=" Vyksa"> Выксунский</option><option  value=" Klimovsk"> Климовск</option><option  value=" Liski"> Лиски</option><option  value=" Volzhsk"> Волжск</option><option  value=" Krasnokamensk"> Краснокаменске</option><option  value=" Zhigulyovsk"> Zhigulyovsk</option><option  value=" Fryazino"> Фрязино</option><option  value=" Uzlovaya"> Узловая</option><option  value=" Lytkarino"> Лыткарино</option><option  value=" Nyagan"> Нягань</option><option  value=" Roslavl"> Рославль</option><option  value=" Gelendzhik"> Геленджик</option><option  value=" Timashyovsk"> Timashyovsk</option><option  value=" Belorechensk"> Белореченский</option><option  value=" Borovichi"> Боровичи</option><option  value=" Solnechnogorsk"> Солнечногорск</option><option  value=" Nazarovo"> Назарово</option><option  value=" Kirishi"> Кириши</option><option  value=" Cheremkhovo"> Черемхово</option><option  value=" Vyshny Volochyok"> Вышний Volochyok</option><option  value=" Krasnokamsk"> Краснокамск</option><option  value=" Beryozovsky"> Beryozovsky</option><option  value=" Balakhna"> Балахна</option><option  value=" Livny"> Ливны</option><option  value=" Lesnoy"> Лесной</option><option  value=" Donetsk"> Донецк</option><option  value=" Severomorsk"> Североморск</option><option  value=" Sayanogorsk"> Саяногорск</option><option  value=" Buguruslan"> Бугуруслан</option><option  value=" Kimry"> Кимры</option><option  value=" Snezhinsk"> Снежинск</option><option  value=" Kingisepp"> Кингисепп</option><option  value=" Zarinsk"> Заринск</option><option  value=" Otradny"> Г. отрадный</option><option  value=" Yartsevo"> Ярцево</option><option  value=" Chusovoy"> Чусовой</option><option  value=" Verkhnyaya Salda"> Верхняя Салда</option><option  value=" Osinniki"> Осинники</option><option  value=" Kanash"> Канаш</option><option  value=" Monchegorsk"> Мончегорск</option><option  value=" Tulun"> Тулун</option><option  value=" Spassk-Dalny"> Спасск-Дальний</option><option  value=" Talnakh"> Талнах</option>
</select><br>
<input type="submit" value="СМОТРЕТЬ">
</form><br><br>
</DIV>
</DIV>
</DIV>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне