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:90%}
.caption{display: table-caption; border: 0px solid black}
.cell{display: table-cell; border: 1px solid black;}
.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 id="thermometer-wrapper">
<meter id="thermometer" min="-30" max="50" value="0"></meter>
<div id="labels"></div>
</div>
<div id="info">
<label>Температура в</label>
<label id="city">-</label>
<label> - </label>
<output id="temperature" form="request">-</output>
<label id="error"></label>
</div>
<form id="request" name="request" action="#">
<label>Город:</label>
<input type="text" id="location" name="location" size="30" placeholder="название города на англ. яз." required="required"/>
</form>
<DIV class="table">
<DIV class="caption"> ГОРОДА РОССИИ </div> 
<DIV class="row">
<DIV class="cell">Dedovsk</DIV>
<DIV class="cell">Zhukovsky</DIV>
<DIV class="cell">wedge</DIV>
<DIV class="cell">Moscow</DIV>
<DIV class="cell">Kaliningrad</DIV>
<DIV class="cell">Tambov</DIV>
</DIV>
<DIV class="cell">Volokolamsk</DIV>
<DIV class="cell">Dmitrov</DIV>
<DIV class="cell">Zvenigorod</DIV>
<DIV class="cell">Yekaterinburg</DIV>
<DIV class="cell">Serpukhov</DIV>
<DIV class="cell">Bryansk</DIV>
<DIV class="row">
<DIV class="cell">Vladimir</DIV>
<DIV class="cell">Yaroslavl</DIV>
<DIV class="cell">Voronezh</DIV>
<DIV class="cell">Kursk</DIV>
<DIV class="cell">Nizhny Novgorod</DIV>
<DIV class="cell">Penza</DIV>
</DIV>
<DIV class="row">
<DIV class="cell">Saratov</DIV>
<DIV class="cell">Balashov</DIV>
<DIV class="cell">Vladivostok</DIV>
<DIV class="cell">Ulan-Ude</DIV>
<DIV class="cell">Chelyabinsk</DIV>
<DIV class="cell">Tyumen</DIV>
</DIV>
</div> 
<p>источник: <a href=http://ug.audero.it/wp-content/uploads/demo/html5-environmental-thermometer/?location=Sochi&submit=Get+temperature%21#>http://ug.audero.it/wp-content/uploads/demo/html5-environmental-thermometer/?location=Sochi&submit=Get+temperature%21#</a></p>
 <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

ПРИМЕР ↴

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