-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
239 lines (236 loc) · 9.9 KB
/
index.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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!--
MTR Train Live Schedule
GitHub & Sponsor this project: https://github.com/sammyfung/mtrtrain
-->
<html lang="en">
<head>
<title>港鐵列車即時班次 - 森路歷程</title>
<meta name="description" content="港鐵, 時間表, 屯馬綫, 將軍澳綫, 東涌綫, 機場快綫, 東鐵綫, 南港島綫, 荃灣綫, 觀塘綫, MTR, Tuen Ma Line, TKO Line, Tung Chung Line, Airport Express Line, East Rail Line, South Island Line, Tsuen Wan Line, Island Line, Kwun Tong Line."/>
<meta charset="utf-8"/>
<style>
th,td { font-size: 32px; text-align: center; }
.std_text { font-size: 32px; }
.head_text { font-size: 48px; }
</style>
</head>
<body>
<h1 id='pagetitle' class='head_text'>港鐵列車即時班次 - 森路歷程</h1>
<p class='std_text'>👍 請多多支持和閱覽 👉 <a href="https://sammy.hk" target="_blank">森路歷程網誌</a> 🙏</p>
<p class='std_text'>🚆 選擇綫路 👉 <a href="?line=AEL">機場快綫</a> | <a href="?line=TCL">東涌綫</a> | <a href="?line=TKL">將軍澳綫</a> | <a href="?line=TML">屯馬綫</a> | <a href="?line=EAL">東鐵綫</a> | <a href="?line=SIL">南港島綫</a> | <a href="?line=TWL">荃灣綫</a> | <a href="?line=ISL">港島線</a> | <a href="?line=KTL">觀塘綫</a> | <a href="/mtrtrain/mtrtrain.html">English</a> .</p>
<p id='curr_time_1' class='curr_time std_text'>⌚️ 現在時間:</p>
<p><h2 id='down_track' class='std_text'>⬇️ 下行列車</h2></p>
<table border='1' id='down' width='100%'>
<!--
<tr><th>車站</th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th></tr>
-->
<tr><th>車站</th><th>1</th><th>2</th><th>3</th><th>4</th></tr>
</table>
<p id='curr_time_2' class='curr_time std_text'>⌚️ 現在時間:</p>
<p><h2 id='up_track' class='std_text'>⬆️ 上行列車</h2></p>
<table border='1' id='up' width='100%'>
</table>
<hr/>
<p class='std_text'>🚆 選擇綫路 👉 <a href="?line=AEL">機場快綫</a> | <a href="?line=TCL">東涌綫</a> | <a href="?line=TKL">將軍澳綫</a> | <a href="?line=TML">屯馬綫</a> | <a href="?line=EAL">東鐵綫</a> | <a href="?line=SIL">南港島綫</a> | <a href="?line=TWL">荃灣綫</a> | <a href="?line=ISL">港島線</a> | <a href="?line=KTL">觀塘綫</a> | <a href="/mtrtrain/mtrtrain.html">English</a> .</p>
<p class='std_text'>👍 請多多支持和閱覽 👉 <a href="https://sammy.hk" target="_blank">森路歷程網誌</a> 🙏</p>
<p class='std_text'>👨💻 程式的開放源碼已放在 <a href="https://github.com/sammyfung/mtrtrain" target="_blank">GitHub</a> 👍 港鐵實時列車服務開放數據則來自<a href='https://data.gov.hk/tc-data/dataset/mtr-data2-nexttrain-data'>資料一線通</a> 👍</p>
</body>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-K0FKV4F132"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-K0FKV4F132');
</script>
<!--
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$progname = '港鐵列車即時班次';
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
};
var $line = getUrlParameter('line');
if ($line == undefined || $line == 'TML') {
$line = 'TML';
$linename = '屯馬綫';
$up_terminus_name = '屯門';
$down_terminus_name = '烏溪沙';
$stations = {
'TUM': '屯門', 'SIH': '兆康', 'TIS': '天水圍',
'LOP': '朗屏', 'YUL': '元朗', 'KSR': '錦上路',
'TWW': '荃灣西', 'MEF': '美孚', 'NAC': '南昌',
'AUS': '柯士甸', 'ETS': '尖東', 'HUH': '紅磡',
'HOM': '何文田', 'TKW': '土瓜灣', 'SUW': '宋皇臺',
'KAT': '啟德', 'DIH': '鑽石山', 'HIK': '顯徑',
'TAW': '大圍', 'CKT': '車公廟', 'STW': '沙田圍',
'CIO': '第一城', 'SHM': '石門', 'TSH': '大水坑',
'HEO': '恆安', 'MOS': '馬鞍山', 'WKS': '烏溪沙'
};
} else if ($line == 'TKL') {
$line = 'TKL';
$linename = '將軍澳綫';
$up_terminus_name = '寶琳及康城';
$down_terminus_name = '北角';
$stations = {
'POA': '寶琳', 'HAH': '坑口', 'LHP': '康城',
'TKO': '將軍澳', 'TIK': '調景嶺', 'YAT': '油塘',
'QUB': '鰂魚涌', 'NOP': '北角'
};
} else if ($line == 'TCL') {
$line = 'TCL';
$linename = '東涌綫';
$up_terminus_name = '東涌';
$down_terminus_name = '香港';
$stations = {
'TUC': '東涌', 'SUN': '欣澳', 'TSY': '青衣',
'LAK': '荔景', 'NAC': '南昌', 'OLY': '奧運',
'KOW': '九龍','HOK': '香港'
};
} else if ($line == 'AEL') {
$line = 'AEL';
$linename = '機場快綫';
$up_terminus_name = '機場及博覽館';
$down_terminus_name = '香港';
$stations = {
'AWE': '博覽館', 'AIR': '機場', 'TSY': '青衣',
'KOW': '九龍', 'HOK': '香港'
};
} else if ($line == 'EAL') {
$line = 'EAL';
$linename = '東鐵綫';
$up_terminus_name = '羅湖及落馬洲';
$down_terminus_name = '金鐘';
$stations = {
'LMC': '落馬洲', 'LOW': '羅湖', 'SHS': '上水',
'FAN': '粉嶺', 'TWO': '太和', 'TAP': '大埔墟',
'UNI': '大學', 'RAC': '馬場', 'FOT': '火炭',
'SHT': '沙田', 'TAW': '大圍', 'KOT': '九龍塘',
'MKK': '旺角東', 'HUH': '紅磡', 'EXC': '會展',
'ADM': '金鐘'
};
} else if ($line == 'SIL') {
$line = 'SIL';
$linename = '南港島綫';
$up_terminus_name = '海怡半島';
$down_terminus_name = '金鐘';
$stations = {
'SOH': '海怡半島', 'LET': '利東', 'WCH': '黃竹坑',
'OCP': '海洋公園', 'ADM': '金鐘'
};
} else if ($line == 'TWL') {
$line = 'TWL';
$linename = '荃灣綫';
$up_terminus_name = '荃灣';
$down_terminus_name = '中環';
$stations = {
'TSW': '荃灣', 'TWH': '大窩口', 'KWH': '葵興',
'KWF': '葵芳', 'LAK': '茘景', 'MEF': '美孚',
'LCK': '茘枝角', 'CSW': '長沙灣', 'SSP': '深水埗',
'PRE': '太子', 'MOK': '旺角', 'YMT': '油麻地',
'JOR': '佐敦', 'TST': '尖沙咀', 'ADM': '金鐘',
'CEN': '中環'
};
} else if ($line == 'ISL') {
$line = 'ISL';
$linename = '港島線';
$up_terminus_name = '柴灣';
$down_terminus_name = '堅尼地城';
$stations = {
'CHW': '柴灣', 'HFC': '杏花邨', 'SKW': '筲箕灣',
'SWH': '西灣河', 'TAK': '太古', 'QUB': '鰂魚涌',
'NOP': '北角', 'FOH': '炮台山', 'TIH': '天后',
'CAB': '銅鑼灣', 'WAC': '灣仔', 'ADM': '金鐘',
'CEN': '中環', 'SHW': '上環', 'SYP': '西營盤',
'HKU': '香港大學', 'KET': '堅尼地城'
};
} else if ($line == 'KTL') {
$line = 'KTL';
$linename = '觀塘綫';
$up_terminus_name = '調景嶺';
$down_terminus_name = '黃埔';
$stations = {
'TIK': '調景嶺', 'YAT': '油塘', 'LAT': '藍田',
'KWT': '觀塘', 'NTK': '牛頭角', 'KOB': '九龍灣',
'CHH': '彩虹', 'DIH': '鑽石山', 'WTS': '黃大仙',
'LOF': '樂富', 'KOT': '九龍塘', 'SKM': '石硤尾',
'PRE': '太子', 'MOK': '旺角', 'YMT': '油麻地',
'HOM': '何文田', 'WHA': '黃埔'
};
};
document.title = $progname + ':' + $linename +' (' + $line + ') - 森路歷程';
$('#pagetitle').html(document.title);
$('#down_track').html('⬇️ 下行列車 ➡️ 往' + $down_terminus_name + '方向');
$('#up_track').html('⬆️ 上行列車 ➡️ 往' + $up_terminus_name + '方向');
$url_prefix = 'https://rt.data.gov.hk/v1/transport/mtr/getSchedule.php';
let url = [];
for ($station in Object.keys($stations)) {
url.push($url_prefix + '?line=' + $line + '&sta=' + Object.keys($stations)[$station]);
}
$.ajaxSetup({
async: false
});
curr_time = undefined;
for ($i in url) {
//console.log(url[$i]);
$.getJSON(url[$i], function( data ) {
//console.log(data);
var downitems = [];
var upitems = [];
if (curr_time == undefined) {
curr_time = data.curr_time;
$('.curr_time').html("⌚️ 現在時間:" + curr_time);
};
$.each( data.data, function( key, val ) {
stopcode = key.replace($line + '-', '');
downitems.push('<th>' + $stations[stopcode] + ' (' + stopcode + ')</th>');
$.each( val.DOWN, function( key, val ) {
if (parseInt(key) < 4) {
time = val.time;
time = time.replace(/^[0-9-]* /, '');
time = time.replace(/:[0-9]*$/, '');
downitems.push( "<td id='" + key + "'>" + time + " (" + val.dest + ") " + "</td>" );
};
});
upitems.push('<th>' + $stations[stopcode] + ' (' + stopcode + ')</th>');
$.each( val.UP, function( key, val ) {
if (parseInt(key) < 4) {
time = val.time;
time = time.replace(/^[0-9-]* /, '');
time = time.replace(/:[0-9]*$/, '');
upitems.push( "<td id='" + key + "'>" + time + " (" + val.dest + ") " + "</td>" );
}
});
});
$( "<tr/>", {
"class": "station-row",
html: downitems.join( "" )
}).appendTo( $("#down") );
$( "<tr/>", {
"class": "station-row",
html: upitems.join( "" )
}).prependTo( $("#up") );
})
.fail(function() {
console.log( "error" );
});
}
$( "<tr/>", {
"class": "station-row",
//html: "<th>車站</th><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th>"
html: "<th>車站</th><th>1</th><th>2</th><th>3</th><th>4</th>"
}).prependTo( $("#up") );
//console.log('END');
</script>
</html>