天気予報ひまてん


  view source
  JavaScript
  ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110 //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);
  CSS
  ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 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;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-weather-forecast/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。
天気予報 ひまてん

JavaScript

CSS

HTML

ABOUT

天気予報ひまてん
