天気予報 ひまてん

//https://open-meteo.com/

$(function(){
  
  var url = 'https://api.open-meteo.com/v1/forecast?latitude=35.6785&longitude=139.6823&hourly=temperature_2m,weathercode&current_weather=true&timezone=Asia%2FTokyo';
  $.getJSON(url, function(data) {
    console.log(data);
    run(data);
  });
  var weatherTexts = function(code){
    if(code===0){
      return {text:'晴',icon:'w-clear.png'};
    } else if(code<3){
      return {text:'晴',icon:'w-cloudy1.png'};
    } else if(code<4){
      return {text:'曇',icon:'w-cloudy2.png'};
    } else if(code<49){
      return {text:'霧',icon:'w-cloudy2.png'};
    } else if(code<56){
      return {text:'霧雨',icon:'w-rain.png'};
    } else if(code<64){
      return {text:'雨',icon:'w-rain.png'};
    } else if(code<68){
      return {text:'雨',icon:'w-rain.png'};
    } else if(code<79){
      return {text:'雪',icon:'w-snow.png'};
    } else if(code<88){
      return {text:'雷',icon:'w-storm.png'};
    } else if(code<99){
      return {text:'雷',icon:'w-storm.png'};
    } else {
      return {text:'？',icon:'w-q.png'};
    }
  }

/*
WMO Weather interpretation codes (WW)
Code	Description
0	Clear sky
1, 2, 3	Mainly clear, partly cloudy, and overcast
45, 48	Fog and depositing rime fog
51, 53, 55	Drizzle: Light, moderate, and dense intensity
56, 57	Freezing Drizzle: Light and dense intensity
61, 63, 65	Rain: Slight, moderate and heavy intensity
66, 67	Freezing Rain: Light and heavy intensity
71, 73, 75	Snow fall: Slight, moderate, and heavy intensity
77	Snow grains
80, 81, 82	Rain showers: Slight, moderate, and violent
85, 86	Snow showers slight and heavy
95 *	Thunderstorm: Slight or moderate
96, 99 *	Thunderstorm with slight and heavy hail
*/
  var run = function(data){
    //$('#currentWeather .time').text(data.current_weather.time);
    //$('#currentWeather .weather').text(data.current_weather.weathercode);

    $table = $('<table>');
    $('#demo').append($table);

  	var now  = new Date();
  	var year = now.getYear() + 1900;
  	var mon  = now.getMonth() + 1;
  	var date = now.getDate();
  	var week = now.getDay();
  	var hour = now.getHours();

    var hours = [...Array(24)].map((_, i) => i);
    hours = [''].concat(hours);
    console.log(hours);
    $tr = $('<tr>');
    $table.append($tr);
    hours.forEach(function(v, i){
      var $th= $('<th>').text(v);
      $tr.append($th);
      if(i===0){
        $th.append($('h1'));
      }
      if(v===hour){
        $th.addClass('now');
      }

    });

    

    data.hourly.time.forEach(function(v, i){
      if(v.match(/00:00/)){
        $tr = $('<tr>');
        $table.append($tr);
        var date = v.replace('T00:00','');
        var $th= $('<th>').text(date);
        $tr.append($th);
        if(i===0){
          $th.addClass('now');
        }
      }
      var $td= $('<td>');
      var w = data.hourly.weathercode[i];
      var wt = weatherTexts(w);
      var $img = $('<img>',{src:wt.icon,alt:wt.text+'('+w+')'});
      var $i = $('<i>').text(data.hourly.temperature_2m[i]);
      $td.append($img).append($i);
      $tr.append($td);
    });
  }
});

setTimeout(function(){
  location.reload();
}, 60*60*1000);

table{
  width:100%;
}
th,
td{
  border:1px solid #666;
  height:9vh;
  text-align:center;
  vertical-align:middle;
}
td img{
  width:32px;
  height:32px;
}
td i{
  display:block;
}
th.now{
  background-color:rgba(0,0,0,0.2);
}

html,body{
  overflow-y:hidden;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-weather-forecast/