-
Notifications
You must be signed in to change notification settings - Fork 57
/
Copy pathAirQuality_Taiwan.html
161 lines (155 loc) · 8.23 KB
/
AirQuality_Taiwan.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Taiwan Air Quality</title>
<script src="https://fustyles.github.io/webduino/AirQuality_Taiwan_20180121/AirQualityTaiwan.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<select name="site" id="site" onchange="getSite();">
<option value=""></option>
<option value="高雄市-美濃">高雄市-美濃</option>
<option value="高雄市-橋頭">高雄市-橋頭</option>
<option value="高雄市-仁武">高雄市-仁武</option>
<option value="高雄市-鳳山" selected>高雄市-鳳山</option>
<option value="高雄市-大寮">高雄市-大寮</option>
<option value="高雄市-林園">高雄市-林園</option>
<option value="高雄市-楠梓">高雄市-楠梓</option>
<option value="高雄市-左營">高雄市-左營</option>
<option value="高雄市-前金">高雄市-前金</option>
<option value="高雄市-前鎮">高雄市-前鎮</option>
<option value="高雄市-小港">高雄市-小港</option>
<option value="高雄市-復興">高雄市-復興</option>
<option value="基隆市-基隆">基隆市-基隆</option>
<option value="新北市-汐止">新北市-汐止</option>
<option value="新北市-萬里">新北市-萬里</option>
<option value="新北市-新店">新北市-新店</option>
<option value="新北市-土城">新北市-土城</option>
<option value="新北市-板橋">新北市-板橋</option>
<option value="新北市-新莊">新北市-新莊</option>
<option value="新北市-菜寮">新北市-菜寮</option>
<option value="新北市-林口">新北市-林口</option>
<option value="新北市-淡水">新北市-淡水</option>
<option value="新北市-永和">新北市-永和</option>
<option value="新北市-三重">新北市-三重</option>
<option value="新北市-富貴角">新北市-富貴角</option>
<option value="臺北市-士林">臺北市-士林</option>
<option value="臺北市-中山">臺北市-中山</option>
<option value="臺北市-萬華">臺北市-萬華</option>
<option value="臺北市-古亭">臺北市-古亭</option>
<option value="臺北市-松山">臺北市-松山</option>
<option value="臺北市-大同">臺北市-大同</option>
<option value="臺北市-陽明">臺北市-陽明</option>
<option value="桃園市-桃園">桃園市-桃園</option>
<option value="桃園市-大園">桃園市-大園</option>
<option value="桃園市-觀音">桃園市-觀音</option>
<option value="桃園市-平鎮">桃園市-平鎮</option>
<option value="桃園市-龍潭">桃園市-龍潭</option>
<option value="桃園市-中壢">桃園市-中壢</option>
<option value="新竹縣-湖口">新竹縣-湖口</option>
<option value="新竹縣-竹東">新竹縣-竹東</option>
<option value="新竹市-新竹">新竹市-新竹</option>
<option value="苗栗縣-頭份">苗栗縣-頭份</option>
<option value="苗栗縣-苗栗">苗栗縣-苗栗</option>
<option value="苗栗縣-三義">苗栗縣-三義</option>
<option value="臺中市-豐原">臺中市-豐原</option>
<option value="臺中市-沙鹿">臺中市-沙鹿</option>
<option value="臺中市-大里">臺中市-大里</option>
<option value="臺中市-忠明">臺中市-忠明</option>
<option value="臺中市-西屯">臺中市-西屯</option>
<option value="彰化縣-彰化">彰化縣-彰化</option>
<option value="彰化縣-線西">彰化縣-線西</option>
<option value="彰化縣-二林">彰化縣-二林</option>
<option value="南投縣-南投">南投縣-南投</option>
<option value="南投縣-竹山">南投縣-竹山</option>
<option value="南投縣-埔里">南投縣-埔里</option>
<option value="雲林縣-斗六">雲林縣-斗六</option>
<option value="雲林縣-崙背">雲林縣-崙背</option>
<option value="雲林縣-臺西">雲林縣-臺西</option>
<option value="雲林縣-麥寮">雲林縣-麥寮</option>
<option value="嘉義縣-新港">嘉義縣-新港</option>
<option value="嘉義縣-朴子">嘉義縣-朴子</option>
<option value="嘉義市-嘉義">嘉義市-嘉義</option>
<option value="臺南市-新營">臺南市-新營</option>
<option value="臺南市-善化">臺南市-善化</option>
<option value="臺南市-安南">臺南市-安南</option>
<option value="臺南市-臺南">臺南市-臺南</option>
<option value="屏東縣-屏東">屏東縣-屏東</option>
<option value="屏東縣-潮州">屏東縣-潮州</option>
<option value="屏東縣-恆春">屏東縣-恆春</option>
<option value="臺東縣-臺東">臺東縣-臺東</option>
<option value="臺東縣-關山">臺東縣-關山</option>
<option value="花蓮縣-花蓮">花蓮縣-花蓮</option>
<option value="宜蘭縣-宜蘭">宜蘭縣-宜蘭</option>
<option value="宜蘭縣-冬山">宜蘭縣-冬山</option>
<option value="連江縣-馬祖">連江縣-馬祖</option>
<option value="金門縣-金門">金門縣-金門</option>
<option value="澎湖縣-馬公">澎湖縣-馬公</option>
</select>
<a href="https://airtw.epa.gov.tw/CHT/Information/Standard/AirQualityIndicator.aspx" target="_blank">空氣品質指標</a>
<br>
<span id="message" style="color:red"></span>
<br>
<div id="data"></div>
<br>
<img src="https://w3fs.tainan.gov.tw/Download.ashx?u=LzAwMS9VcGxvYWQvMTU5L2NrZmlsZS8xZmRiMzY0NC0yZWVjLTQ4NDctODI4NS02YjljYjRjMzllNTcucG5n&n=NigxKS5wbmc%3D&icon=.png">
</body>
</html>
<script>
window.onload = function() {
getData();
var site = document.getElementById("site").value;
var strUrl=location.search;
if (strUrl.indexOf("?")!=-1) {
document.getElementById("site").value = decodeURI(strUrl.split("?")[1]);
}
if (site!="") {
setTimeout(function(){getSite();}, 5000);
}
setInterval(function(){
var site = document.getElementById("site").value;
if (site!="") {
getData();
setTimeout(function(){getSite();}, 5000);
}
}, 600000);
}
function getData() {
var message = document.getElementById("message");
message.innerHTML = "遠端資料載入中...";
pmgov_link('https://opendata.epa.gov.tw/webapi/Data/REWIQA/?$orderby=SiteName&$skip=0&$top=1000&format=json',"JSON");
message.innerHTML = "";
}
function getSite(){
var site = document.getElementById("site").value;
var message = document.getElementById("message");
message.innerHTML = "讀取資料中...";
document.getElementById("data").innerHTML= "<table>" +
'<tr><td>Site:</td><td>'+pmgov_get(site,"County")+'-'+pmgov_get(site,"SiteName")+'</td></tr>'+
'<tr><td>AQI:</td><td>'+pmgov_get(site,"AQI")+'</td></tr>'+
'<tr><td>Pollutant:</td><td>'+pmgov_get(site,"Pollutant")+'</td></tr>'+
'<tr><td>Status:</td><td>'+pmgov_get(site,"Status")+'</td></tr>'+
'<tr><td>SO2 (ppb):</td><td>'+pmgov_get(site,"SO2")+'</td></tr>'+
'<tr><td>CO (ppm):</td><td>'+pmgov_get(site,"CO")+'</td></tr>'+
'<tr><td>CO_8hr (ppm):</td><td>'+pmgov_get(site,"CO_8hr")+'</td></tr>'+
'<tr><td>O3 (ppb):</td><td>'+pmgov_get(site,"O3")+'</td></tr>'+
'<tr><td>O3_8hr (ppb):</td><td>'+pmgov_get(site,"O3_8hr")+'</td></tr>'+
'<tr><td>PM10 (μg/m3):</td><td>'+pmgov_get(site,"PM10")+'</td></tr>'+
'<tr><td>PM2.5 (μg/m3):</td><td>'+pmgov_get(site,"PM2.5")+'</td></tr>'+
'<tr><td>NO2 (ppb):</td><td>'+pmgov_get(site,"NO2")+'</td></tr>'+
'<tr><td>NOx (ppb):</td><td>'+pmgov_get(site,"NOx")+'</td></tr>'+
'<tr><td>NO (ppb):</td><td>'+pmgov_get(site,"NO")+'</td></tr>'+
'<tr><td>WindDirec (degrees):</td><td>'+pmgov_get(site,"WindDirec")+'</td></tr>'+
'<tr><td>WindSpeed (m/sec):</td><td>'+pmgov_get(site,"WindSpeed")+'</td></tr>'+
'<tr><td>PublishTime:</td><td>'+pmgov_get(site,"PublishTime")+'</td></tr>'+
'<tr><td>PM2.5_AVG (μg/m3):</td><td>'+pmgov_get(site,"PM2.5_AVG")+'</td></tr>'+
'<tr><td>PM10_AVG (μg/m3):</td><td>'+pmgov_get(site,"PM10_AVG")+'</td></tr>'+
'<tr><td>Latitude:</td><td>'+pmgov_get(site,"Latitude")+'</td></tr>'+
'<tr><td>Longitude:</td><td>'+pmgov_get(site,"Longitude")+'</td></tr>'+
'</table>';
var d = new Date().toString();
d = d.substr(0,d.indexOf("GMT"));
message.innerHTML = d;
}
</script>