再掲、列車の走行位置プログラムを仕上げたい。

[えっぴ～]

再掲、
列車走行位置のプログラムを作りたいです。
以下のプログラムでは、出発駅と到着駅の時刻は指定できますが、途中駅は指定できません。
1dとd1はおそらく、方向が逆という意味なのは理解できますが、それ以外は全く理解できません。
中間駅の時間の指定はできませんか。
以下はそのjavascriptです。
// js

var hour;
var min;
var sec;
var today;
var bSec = -1;
var bDay = 1;
var uSec = -1;

var daySec;
var diaData = [
[
" 1 1D 05430620",
" 14 D1 06440719",
" 17 1D 07340809",
" 30 D1 08180857",
" 33 1D 09150950",
" 44 D1 10061040",
" 47 1D 11061141",
" 58 D1 12011238",
" 61 1D 13031339",
" 72 D1 13551429",
" 75 1D 14531531",
" 86 D1 15501624",
" 89 1D 16481727",
" 100 D1 17371814",
" 103 1D 18351912",
" 114 D1 19221959",
" 117 1D 20202057",
" 128 D1 21072144",
" 129 1D 21502227",
" 140 D1 22372314",
" 141 1D 23202355"
],
[
" 2 D1 05290604",
" 5 1D 06100644",
" 16 D1 06570731",
" 19 1D 07440824",
" 32 D1 08340909",
" 35 1D 09271004",
" 46 D1 10211058",
" 49 1D 11221156",
" 60 D1 12181254",
" 63 1D 13151353",
" 74 D1 14081442",
" 77 1D 15121550",
" 88 D1 16051640",
" 91 1D 17051742",
" 102 D1 17521829",
" 105 1D 18501927",
" 116 D1 19372014",
" 119 1D 20352112",
" 130 D1 21222159",
" 131 1D 22032242",
" 142 D1 22522329",
" 243 15 23502400"
],
[
" 4 D1 05460620",
" 7 1D 06260703",
" 20 D1 07180754",
" 23 1D 08090846",
"2400 D5 08560919"
],
[
" 6 D1 06010636",
" 9 1D 06490724",
" 22 D1 07310806",
" 25 1D 08200855",
" 36 D1 09020936",
" 39 1D 10041039",
" 50 D1 10541131",
" 53 1D 11541230",
" 64 D1 12591335",
" 67 1D 13521429",
" 78 D1 144214521520",
" 81 1D 15411617",
" 92 D1 16371714",
" 95 1D 17351812",
" 106 D1 18221859",
" 109 1D 19201957",
" 120 D1 20072044",
"2403 15 20472103"
],
[
" 10 D1 06240658",
" 13 1D 07110745",
" 26 D1 07540830",
" 29 1D 08470922",
" 40 D1 09301004",
" 43 1D 10301106",
" 54 D1 11291203",
" 57 1D 12291304",
" 68 D1 13261402",
" 71 1D 14211455",
" 82 D1 15121549",
" 85 1D 16151650",
" 96 D1 17071744",
" 99 1D 18051842",
" 110 D1 18521929",
" 113 1D 19502027",
" 124 D1 20372114",
" 125 1D 21202157",
" 136 D1 22072244",
" 137 1D 22502326"
],
[
" 203 5D 06050629",
" 12 D1 06320709",
" 15 1D 07220800",
" 28 D1 08050841",
" 31 1D 09000935",
" 42 D1 09521026",
" 45 1D 10491124",
" 56 D1 11441222",
" 59 1D 12441319",
" 70 D1 13411418",
" 73 1D 14331511",
" 84 D1 15271602",
" 87 1D 16321712",
" 98 D1 17221759",
" 101 1D 18201857",
" 112 D1 19071944",
" 115 1D 20052042",
" 126 D1 20522129",
" 127 1D 21352212",
" 138 D1 22222259",
" 139 1D 23052340"
],
[
"2401 5D 06290654",
" 18 D1 07050742",
" 21 1D 07560833",
" 34 D1 08490925",
" 37 1D 09431019",
" 48 D1 10401116",
" 51 1D 11381213",
" 62 D1 12431323",
" 65 1D 13271401",
" 76 D1 14251502",
" 79 1D 15271603",
" 90 D1 16211659",
" 93 1D 17201757",
" 104 D1 18071844",
" 107 1D 19051942",
" 118 D1 19522029",
" 121 1D 20502127",
" 132 D1 21372212",
" 133 1D 22202257",
" 144 D1 23072342"
],
[
" 208 51 06360646",
" 11 1D 06590737",
" 24 D1 07410817",
" 27 1D 08310908",
" 38 D1 09160952",
" 41 1D 10171053",
" 52 D1 11121147",
" 55 1D 12131247",
" 66 D1 13131347",
" 69 1D 14081447",
" 80 D1 14581535",
" 83 1D 15541633",
" 94 D1 16521729",
" 97 1D 17501827",
" 108 D1 18371914",
" 111 1D 19352012",
" 122 D1 20222059",
" 123 1D 21052142",
" 134 D1 21522229",
" 135 1D 22352312"
],
[
"4025 1D 10401108"
],
[
"8079 1D 12111239"
],
[
"4035 1D 13401406"
],
[
"8087 1D 15101538"
],
[
"8072 D1 09461012"
],
[
"4026 D1 12351301"
],
[
"8080 D1 14181443"
],
[
"4034 D1 15391604"
]
];
var izst = [
[ 0, 1, "三島" ],
[ 13, 0, "三島広小路" ],
[ 20, 1, "三島田町" ],
[ 29, 0, "三島二日町" ],
[ 55, 1, "大場" ],
[ 70, 0, "伊豆仁田" ],
[ 85, 0, "原木" ],
[ 98, 0, "韮山" ],
[ 114, 1, "伊豆長岡" ],
[ 142, 0, "田京" ],
[ 166, 1, "大仁" ],
[ 186, 0, "牧之郷" ],
[ 198, 1, "修善寺" ]
];
var forms = [
"3501 3501 3002 3001 31 軌",
"3502 3502 3004 3003 32 横",
"3503 3503 3006 3005 33 ワ",
"3504 3504 3008 3007 34 矢",
"3505 3505 3010 3009 35 コ",
"3506 3506 3012 3011 36 幸",
"7501 7501 7301 7101 71 71",
"7502 7502 7302 7102 72 72",
"1301 2201 1401 1301 11 黄",
"1302 2202 1402 1302 12 12"
];
var trainColor = [
"#209020",
"#60d0ff",
"#60d0ff",
"#60d0ff",
"#60d0ff",
"#0080ff",
"#60d0ff",
"#60d0ff",
"#ffff00",
"#60d0ff"
];
var formColor = [
"#ffffff",
"#000000",
"#000000",
"#000000",
"#000000",
"#ffffff",
"#000000",
"#000000",
"#000000",
"#000000",
];
// var opData = null;
// var opData = "0123456789";
var opData = "01367";

// 2401 1 203 10 208 - - -
// 1-141, 2-243, 4-23-2400, 6-120-2403, 10-137, 203-139, 2401-18-144, 208-135

var bAutoUpdate;
var strOption;
options = {
dt: null,
debug: 0
};

var page = 0;
var step = 10;


// DOM functions
function $(id) {
return document.getElementById(id);
}
function $tags(tagName) {
return document.getElementsByTagName(tagName);
}
function $tag(tagName) {
return document.getElementsByTagName(tagName)[0];
}

// 初期化
window.onload = function() {
init();
}
function init() {
showPage(page);
setDisplay();
setStation();
setHandler();
// loadOption();
periodicProc();
}

// ページ切り替え
function showPage(n) {
var els = $tags("section");
for (var i = 0; i < els.length; i++) {
els.classList.add("clsHide");
}
els = $tags("button");
for (i = 0; i < els.length; i++) {
els.classList.remove("btnDisable", "btnEnable", "btnHide");
els.setAttribute("disabled", false);
els.removeAttribute("disabled");
els.removeEventListener("click", function() {}, false);
}
if (n == 0) {
var el = $("btn1");
el.textContent = "-";
el.classList.add("btnDisable");
el.setAttribute("disabled", true);
el = $("btn2");
el.textContent = "-";
el.classList.add("btnDisable");
el.setAttribute("disabled", true);
el = $("btn3");
el.textContent = "-";
el.classList.add("btnDisable");
el.setAttribute("disabled", true);
el = $("btn4");
el.textContent = "出虫";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
showPage(3);
}, false);
$("pagePosition").classList.remove("clsHide");
}
else if (n == 3) {
var el = $("btn1");
el.textContent = "REV";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
step = -10;
}, false);
el = $("btn2");
el.textContent = "PAU";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
step = 0;
}, false);
el = $("btn3");
el.textContent = "FWD";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
step = 10;
}, false);
el = $("btn4");
el.textContent = "FF";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
step = 60;
}, false);
$("pagePosition").classList.remove("clsHide");
options.debug = 1;
}

page = n;
}

// 表示設定
function setDisplay() {
// $("idDateTime").textContent = "-";
setHeader();
setFooter();
$("secMap").classList.remove("clsHide");
}
function setHeader() {
$tag("body").style.paddingTop = $tag("header").clientHeight + "px";
}
function setFooter() {
$tag("body").style.paddingBottom = $tag("footer").clientHeight + "px";
}

// 駅設定
function setStation() {
var n = izst.length;
for (var i = 0; i < n; i++) {
var isMark = izst[1];
var pos = izst[0];
var name = izst[2];
var x = 8;
var y = 0;
var xx = 209;
var cls = "clsSta";
if (pos < 200) {
y = 10 + pos * 2.5;
cls += "Left";
}
var html = "<div id='divStation" + i + "' class='clsStation'>";
html += "</div>";
$("divMap").innerHTML += html;
$("divStation" + i).style.left = xx + "px";
$("divStation" + i).style.top = y + 1 + "px";
if (isMark) {
y -= 2;
cls += "Mark";
}
html = "<div id='divStaName" + i + "' class='" + cls + "'>";
html += name + "</div>";
$("divMap").innerHTML += html;
$("divStaName" + i).style.left = x + "px";
$("divStaName" + i).style.top = y - 8 + "px";
}
}

// イベントハンドラ設定
function setHandler() {
// ヘッダー
$tag("div").addEventListener("click", function() {
var menu = $("menu");
if (menu.classList.contains("clsHide")) {
menu.classList.remove("clsHide");
}
else if (page != 3) {
menu.classList.add("clsHide");
}
setHeader();
}, false);
}

// 繰り返し処理
function periodicProc() {
if (options.debug) intervalDebug();
else intervalProc();
}
function intervalProc() {
setHeader();
var date = new Date();
//date.setTime(date.getTime() - (0 * 3600 + 0 * 60 + 0) * 1000);
//date.setTime(date.getTime() - 0 * 86400000);
daySec = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
if (date.getHours() < 3) daySec += 24 * 3600;
sec = date.getSeconds();
if (bSec != sec) {
if (bAutoUpdate && (sec == uSec)) updateOption();
bSec = sec;
// 1秒毎の処理
hour = date.getHours();
min = date.getMinutes();
var time = date.getTime();
if (hour < 3) {
time -= 86400000;
hour += 24;
}
date.setTime(time);
var cDay = ~~((time + 32400000) / 86400000);
if (bDay != cDay) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
today = year + ((month > 9) ? "" : "0") + month;
today += ((day > 9) ? "" : "0") + day;
if (options.dt && (options.dt != today)) {
if (!bDay) {
var str = "今日のデータではありません。\n";
str += "(" + options.dt + ")";
// alert(str);
}
options.dt = null;
}
// 日毎の処理
bDay = cDay;
// showLegend();
setTrains();
}
setCurrentDateStr(date, hour, min, sec);
// 秒毎の処理
updateTrains();
}
window.setTimeout(periodicProc, 100);
}
// 時刻表示
function setCurrentDateStr(date, hour, min, sec) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var str = year + "年";
str += ((month > 9) ? "" : " ") + month + "月";
str += ((day > 9) ? "" : " ") + day + "日";
str += "(" + [ "日", "月", "火", "水", "木", "金", "土" ][date.getDay()] + ")　";
str += ((hour > 9) ? "" : "0") + hour + ":";
str += ((min > 9) ? "" : "0") + min + ":";
str += ((sec > 9) ? "" : "0") + sec;
$("idDateTime").textContent = str;
setHeader();
}

// 繰り返しデバッグ処理
function intervalDebug() {
if (!((18000 <= daySec) && (daySec <= 88200))) {
daySec = step < 0 ? 88200 : 18000;
bDay = bDay ? 0 : 1;
setTrains();
}
var hour = ~~(daySec / 3600);
var min = ~~(daySec / 60) % 60;
var sec = daySec % 60;
var str = "[DEBUG]　"
str += ((hour > 9) ? "" : "0") + hour + ":";
str += ((min > 9) ? "" : "0") + min + ":";
str += ((sec > 9) ? "" : "0") + sec;
$("idDateTime").textContent = str;
updateTrains();
daySec += step;
window.setTimeout(periodicProc, 50);
}

// 列車登録
function setTrains() {
$("divTrain").innerHTML = "";
for (var i = 0; i < diaData.length; i++) {
setTrain(i);
}
}
function setTrain(i) {
var dia = diaData;
var opStr = dia[0].slice(0, 4).replace(/^ +/, "");
var opNum = parseInt(opStr);

var str = "";
if (opNum >= 4000) {
str = "踊";
}
if (opData && (i < opData.length)) {
str = forms[parseInt(opData.charAt(i))].slice(23);
}

var html;
if (str.length > 0) {
html = "<div id='divTr" + opStr;
html += "' class='clsTrainSIF clsHide'>" + str + "</div>";
$("divTrain").innerHTML += html;
}
else {
html = "<div id='divTr" + opStr;
html += "' class='clsTrain clsHide'></div>";
$("divTrain").innerHTML += html;
}
$("divTr" + opStr).style.backgroundColor = "#a0a0a0";
html = "<div id='divTN" + opStr;
html += "' class='clsHide'>" + opStr + "</div>";
$("divTrain").innerHTML += html;
}

// 列車表示更新
function updateTrains() {
var td = daySec;
if (td < 10800) td = 10800;
for (var i = 0; i < diaData.length; i++) {
updateTrain(i, td);
}
}
function updateTrain(j, td) {
var dia = diaData[j];
var opStr = dia[0].slice(0, 4).replace(/^ +/, "");
var isDown = false;
var isOp = false;
var t0 = 0;
var t1 = 0;
var s0 = 0;
var s1 = 0;
for (var i = 0; i < dia.length; i++) {
t0 = parseInt(dia.slice(8, 12), 10);
t0 = (~~(t0 / 100) * 60 + (t0 % 100)) * 60;
if ((i == 0) && (td < t0 - 300)) break;
t1 = parseInt(dia.slice(12, 16), 10);
t1 = (~~(t1 / 100) * 60 + (t1 % 100)) * 60;
if (i + 1 == dia.length) {
if (t1 + 300 < td) continue;
}
else {
var t2 = parseInt(dia[i + 1].slice(8, 12), 10);
t2 = (~~(t2 / 100) * 60 + (t2 % 100)) * 60;
if ((t1 + t2) / 2 < td) continue;
}
isOp = true;
s0 = parseInt(dia.slice(5, 6), 16) - 1;
s1 = parseInt(dia.slice(6, 7), 16) - 1;
isDown = (s0 < s1);
break;
}
if (isOp) {
var pos = (td - t0) / (t1 - t0);
if (td < t0) {
pos = izst[s0][0];
}
else if (t1 < td) {
pos = izst[s1][0];
}
else if (isDown) {
pos = (izst[s1][0] - izst[s0][0]) * pos + izst[s0][0];
}
else {
pos = izst[s0][0] - (izst[s0][0] - izst[s1][0]) * pos;
}
var x = isDown ? 234 : 214;
var y = 10 + pos * 2.5;
var xx = isDown ? 258 : 136;

var n = parseInt(dia.slice(0, 1));
var str = dia.slice(0, 4).replace(/^ +/, "") + (n >= 4 ? "M" : "");
if (i > 0) str += " (" + opStr + ")";
$("divTN" + opStr).textContent = str;
$("divTN" + opStr).style.left = xx + "px";
$("divTN" + opStr).style.top = (y - 6) + "px";
x += 4 - ($("divTr" + opStr).getBoundingClientRect().width) / 2;
y += 3 - ($("divTr" + opStr).getBoundingClientRect().height) / 2;
$("divTr" + opStr).style.left = x + "px";
$("divTr" + opStr).style.top = y + "px";
if (n >= 8) {
$("divTr" + opStr).style.color = "#000000";
$("divTr" + opStr).style.backgroundColor = "#ffa0ff";
}
else if (n >= 4) {
$("divTr" + opStr).style.color = "#000000";
$("divTr" + opStr).style.backgroundColor = "#ffffff";
}
else if (n == 2) {
$("divTr" + opStr).style.color = "#000000";
$("divTr" + opStr).style.backgroundColor = "#a0a0a0";
}
else if (dia.slice(0, 1) == " ") {
var f = 0;
if (opData && (j < opData.length)) {
f = parseInt(opData.charAt(j)) + 1;
}
if (f) {
$("divTr" + opStr).style.color = formColor[f - 1];
$("divTr" + opStr).style.backgroundColor = trainColor[f - 1];
}
else {
$("divTr" + opStr).style.color = "#000000";
$("divTr" + opStr).style.backgroundColor = "#60d0ff";
}
}
$("divTr" + opStr).classList.remove("clsHide");

if (isDown) {
$("divTN" + opStr).classList.remove("clsTraLeft")
$("divTN" + opStr).classList.add("clsTraRight")
$("divTN" + opStr).classList.remove("clsHide");
}
else {
$("divTN" + opStr).classList.remove("clsTraRight")
$("divTN" + opStr).classList.add("clsTraLeft")
$("divTN" + opStr).classList.remove("clsHide");
}
}
else {
$("divTr" + opStr).classList.add("clsHide");
$("divTN" + opStr).classList.add("clsHide");
}
}

// eof
そして、参考にしたサイトがこちらです。
https://chocoden.chobi.net/izuppako/izuppako_now.html
例えば、A駅に10時B駅に11時C駅に12時といった具合に、紐づけたいのです。
要するに電車が通る駅を通過・停車に関わらず全て配列に入れる方法が、不明なのです。

[あたっしゅ]

東上☆海美☆「
JavaScript の部分だけじゃなくて、
JavaScript を含んだ .html を up してください。
」

[みけCAT]

ソースコードを提示する際は、BBCodeが有効な(無効にしない)状態で、
BBCodeのcodeタグの開始タグと終了タグの組(開始タグが先)で囲んでいただけると、
見やすくてありがたいです。

[えっぴ～]

再掲、
列車走行位置のプログラムを作りたいです。
以下のプログラムでは、出発駅と到着駅の時刻は指定できますが、途中駅は指定できません。
1dとd1はおそらく、方向が逆という意味なのは理解できますが、それ以外は全く理解できません。
中間駅の時間の指定はできませんか。
以下はそのjavascriptです。
<code>
// js

var hour;
var min;
var sec;
var today;
var bSec = -1;
var bDay = 1;
var uSec = -1;

var daySec;
var diaData = [
[
" 1 1D 05430620",
" 14 D1 06440719",
" 17 1D 07340809",
" 30 D1 08180857",
" 33 1D 09150950",
" 44 D1 10061040",
" 47 1D 11061141",
" 58 D1 12011238",
" 61 1D 13031339",
" 72 D1 13551429",
" 75 1D 14531531",
" 86 D1 15501624",
" 89 1D 16481727",
" 100 D1 17371814",
" 103 1D 18351912",
" 114 D1 19221959",
" 117 1D 20202057",
" 128 D1 21072144",
" 129 1D 21502227",
" 140 D1 22372314",
" 141 1D 23202355"
],
[
" 2 D1 05290604",
" 5 1D 06100644",
" 16 D1 06570731",
" 19 1D 07440824",
" 32 D1 08340909",
" 35 1D 09271004",
" 46 D1 10211058",
" 49 1D 11221156",
" 60 D1 12181254",
" 63 1D 13151353",
" 74 D1 14081442",
" 77 1D 15121550",
" 88 D1 16051640",
" 91 1D 17051742",
" 102 D1 17521829",
" 105 1D 18501927",
" 116 D1 19372014",
" 119 1D 20352112",
" 130 D1 21222159",
" 131 1D 22032242",
" 142 D1 22522329",
" 243 15 23502400"
],
[
" 4 D1 05460620",
" 7 1D 06260703",
" 20 D1 07180754",
" 23 1D 08090846",
"2400 D5 08560919"
],
[
" 6 D1 06010636",
" 9 1D 06490724",
" 22 D1 07310806",
" 25 1D 08200855",
" 36 D1 09020936",
" 39 1D 10041039",
" 50 D1 10541131",
" 53 1D 11541230",
" 64 D1 12591335",
" 67 1D 13521429",
" 78 D1 144214521520",
" 81 1D 15411617",
" 92 D1 16371714",
" 95 1D 17351812",
" 106 D1 18221859",
" 109 1D 19201957",
" 120 D1 20072044",
"2403 15 20472103"
],
[
" 10 D1 06240658",
" 13 1D 07110745",
" 26 D1 07540830",
" 29 1D 08470922",
" 40 D1 09301004",
" 43 1D 10301106",
" 54 D1 11291203",
" 57 1D 12291304",
" 68 D1 13261402",
" 71 1D 14211455",
" 82 D1 15121549",
" 85 1D 16151650",
" 96 D1 17071744",
" 99 1D 18051842",
" 110 D1 18521929",
" 113 1D 19502027",
" 124 D1 20372114",
" 125 1D 21202157",
" 136 D1 22072244",
" 137 1D 22502326"
],
[
" 203 5D 06050629",
" 12 D1 06320709",
" 15 1D 07220800",
" 28 D1 08050841",
" 31 1D 09000935",
" 42 D1 09521026",
" 45 1D 10491124",
" 56 D1 11441222",
" 59 1D 12441319",
" 70 D1 13411418",
" 73 1D 14331511",
" 84 D1 15271602",
" 87 1D 16321712",
" 98 D1 17221759",
" 101 1D 18201857",
" 112 D1 19071944",
" 115 1D 20052042",
" 126 D1 20522129",
" 127 1D 21352212",
" 138 D1 22222259",
" 139 1D 23052340"
],
[
"2401 5D 06290654",
" 18 D1 07050742",
" 21 1D 07560833",
" 34 D1 08490925",
" 37 1D 09431019",
" 48 D1 10401116",
" 51 1D 11381213",
" 62 D1 12431323",
" 65 1D 13271401",
" 76 D1 14251502",
" 79 1D 15271603",
" 90 D1 16211659",
" 93 1D 17201757",
" 104 D1 18071844",
" 107 1D 19051942",
" 118 D1 19522029",
" 121 1D 20502127",
" 132 D1 21372212",
" 133 1D 22202257",
" 144 D1 23072342"
],
[
" 208 51 06360646",
" 11 1D 06590737",
" 24 D1 07410817",
" 27 1D 08310908",
" 38 D1 09160952",
" 41 1D 10171053",
" 52 D1 11121147",
" 55 1D 12131247",
" 66 D1 13131347",
" 69 1D 14081447",
" 80 D1 14581535",
" 83 1D 15541633",
" 94 D1 16521729",
" 97 1D 17501827",
" 108 D1 18371914",
" 111 1D 19352012",
" 122 D1 20222059",
" 123 1D 21052142",
" 134 D1 21522229",
" 135 1D 22352312"
],
[
"4025 1D 10401108"
],
[
"8079 1D 12111239"
],
[
"4035 1D 13401406"
],
[
"8087 1D 15101538"
],
[
"8072 D1 09461012"
],
[
"4026 D1 12351301"
],
[
"8080 D1 14181443"
],
[
"4034 D1 15391604"
]
];
var izst = [
[ 0, 1, "三島" ],
[ 13, 0, "三島広小路" ],
[ 20, 1, "三島田町" ],
[ 29, 0, "三島二日町" ],
[ 55, 1, "大場" ],
[ 70, 0, "伊豆仁田" ],
[ 85, 0, "原木" ],
[ 98, 0, "韮山" ],
[ 114, 1, "伊豆長岡" ],
[ 142, 0, "田京" ],
[ 166, 1, "大仁" ],
[ 186, 0, "牧之郷" ],
[ 198, 1, "修善寺" ]
];
var forms = [
"3501 3501 3002 3001 31 軌",
"3502 3502 3004 3003 32 横",
"3503 3503 3006 3005 33 ワ",
"3504 3504 3008 3007 34 矢",
"3505 3505 3010 3009 35 コ",
"3506 3506 3012 3011 36 幸",
"7501 7501 7301 7101 71 71",
"7502 7502 7302 7102 72 72",
"1301 2201 1401 1301 11 黄",
"1302 2202 1402 1302 12 12"
];
var trainColor = [
"#209020",
"#60d0ff",
"#60d0ff",
"#60d0ff",
"#60d0ff",
"#0080ff",
"#60d0ff",
"#60d0ff",
"#ffff00",
"#60d0ff"
];
var formColor = [
"#ffffff",
"#000000",
"#000000",
"#000000",
"#000000",
"#ffffff",
"#000000",
"#000000",
"#000000",
"#000000",
];
// var opData = null;
// var opData = "0123456789";
var opData = "01367";

// 2401 1 203 10 208 - - -
// 1-141, 2-243, 4-23-2400, 6-120-2403, 10-137, 203-139, 2401-18-144, 208-135

var bAutoUpdate;
var strOption;
options = {
dt: null,
debug: 0
};

var page = 0;
var step = 10;


// DOM functions
function $(id) {
return document.getElementById(id);
}
function $tags(tagName) {
return document.getElementsByTagName(tagName);
}
function $tag(tagName) {
return document.getElementsByTagName(tagName)[0];
}

// 初期化
window.onload = function() {
init();
}
function init() {
showPage(page);
setDisplay();
setStation();
setHandler();
// loadOption();
periodicProc();
}

// ページ切り替え
function showPage(n) {
var els = $tags("section");
for (var i = 0; i < els.length; i++) {
els.classList.add("clsHide");
}
els = $tags("button");
for (i = 0; i < els.length; i++) {
els.classList.remove("btnDisable", "btnEnable", "btnHide");
els.setAttribute("disabled", false);
els.removeAttribute("disabled");
els.removeEventListener("click", function() {}, false);
}
if (n == 0) {
var el = $("btn1");
el.textContent = "-";
el.classList.add("btnDisable");
el.setAttribute("disabled", true);
el = $("btn2");
el.textContent = "-";
el.classList.add("btnDisable");
el.setAttribute("disabled", true);
el = $("btn3");
el.textContent = "-";
el.classList.add("btnDisable");
el.setAttribute("disabled", true);
el = $("btn4");
el.textContent = "出虫";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
showPage(3);
}, false);
$("pagePosition").classList.remove("clsHide");
}
else if (n == 3) {
var el = $("btn1");
el.textContent = "REV";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
step = -10;
}, false);
el = $("btn2");
el.textContent = "PAU";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
step = 0;
}, false);
el = $("btn3");
el.textContent = "FWD";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
step = 10;
}, false);
el = $("btn4");
el.textContent = "FF";
el.classList.add("btnEnable");
el.addEventListener("click", function() {
step = 60;
}, false);
$("pagePosition").classList.remove("clsHide");
options.debug = 1;
}

page = n;
}

// 表示設定
function setDisplay() {
// $("idDateTime").textContent = "-";
setHeader();
setFooter();
$("secMap").classList.remove("clsHide");
}
function setHeader() {
$tag("body").style.paddingTop = $tag("header").clientHeight + "px";
}
function setFooter() {
$tag("body").style.paddingBottom = $tag("footer").clientHeight + "px";
}

// 駅設定
function setStation() {
var n = izst.length;
for (var i = 0; i < n; i++) {
var isMark = izst[1];
var pos = izst[0];
var name = izst[2];
var x = 8;
var y = 0;
var xx = 209;
var cls = "clsSta";
if (pos < 200) {
y = 10 + pos * 2.5;
cls += "Left";
}
var html = "<div id='divStation" + i + "' class='clsStation'>";
html += "</div>";
$("divMap").innerHTML += html;
$("divStation" + i).style.left = xx + "px";
$("divStation" + i).style.top = y + 1 + "px";
if (isMark) {
y -= 2;
cls += "Mark";
}
html = "<div id='divStaName" + i + "' class='" + cls + "'>";
html += name + "</div>";
$("divMap").innerHTML += html;
$("divStaName" + i).style.left = x + "px";
$("divStaName" + i).style.top = y - 8 + "px";
}
}

// イベントハンドラ設定
function setHandler() {
// ヘッダー
$tag("div").addEventListener("click", function() {
var menu = $("menu");
if (menu.classList.contains("clsHide")) {
menu.classList.remove("clsHide");
}
else if (page != 3) {
menu.classList.add("clsHide");
}
setHeader();
}, false);
}

// 繰り返し処理
function periodicProc() {
if (options.debug) intervalDebug();
else intervalProc();
}
function intervalProc() {
setHeader();
var date = new Date();
//date.setTime(date.getTime() - (0 * 3600 + 0 * 60 + 0) * 1000);
//date.setTime(date.getTime() - 0 * 86400000);
daySec = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
if (date.getHours() < 3) daySec += 24 * 3600;
sec = date.getSeconds();
if (bSec != sec) {
if (bAutoUpdate && (sec == uSec)) updateOption();
bSec = sec;
// 1秒毎の処理
hour = date.getHours();
min = date.getMinutes();
var time = date.getTime();
if (hour < 3) {
time -= 86400000;
hour += 24;
}
date.setTime(time);
var cDay = ~~((time + 32400000) / 86400000);
if (bDay != cDay) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
today = year + ((month > 9) ? "" : "0") + month;
today += ((day > 9) ? "" : "0") + day;
if (options.dt && (options.dt != today)) {
if (!bDay) {
var str = "今日のデータではありません。\n";
str += "(" + options.dt + ")";
// alert(str);
}
options.dt = null;
}
// 日毎の処理
bDay = cDay;
// showLegend();
setTrains();
}
setCurrentDateStr(date, hour, min, sec);
// 秒毎の処理
updateTrains();
}
window.setTimeout(periodicProc, 100);
}
// 時刻表示
function setCurrentDateStr(date, hour, min, sec) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var str = year + "年";
str += ((month > 9) ? "" : " ") + month + "月";
str += ((day > 9) ? "" : " ") + day + "日";
str += "(" + [ "日", "月", "火", "水", "木", "金", "土" ][date.getDay()] + ")　";
str += ((hour > 9) ? "" : "0") + hour + ":";
str += ((min > 9) ? "" : "0") + min + ":";
str += ((sec > 9) ? "" : "0") + sec;
$("idDateTime").textContent = str;
setHeader();
}

// 繰り返しデバッグ処理
function intervalDebug() {
if (!((18000 <= daySec) && (daySec <= 88200))) {
daySec = step < 0 ? 88200 : 18000;
bDay = bDay ? 0 : 1;
setTrains();
}
var hour = ~~(daySec / 3600);
var min = ~~(daySec / 60) % 60;
var sec = daySec % 60;
var str = "[DEBUG]　"
str += ((hour > 9) ? "" : "0") + hour + ":";
str += ((min > 9) ? "" : "0") + min + ":";
str += ((sec > 9) ? "" : "0") + sec;
$("idDateTime").textContent = str;
updateTrains();
daySec += step;
window.setTimeout(periodicProc, 50);
}

// 列車登録
function setTrains() {
$("divTrain").innerHTML = "";
for (var i = 0; i < diaData.length; i++) {
setTrain(i);
}
}
function setTrain(i) {
var dia = diaData;
var opStr = dia[0].slice(0, 4).replace(/^ +/, "");
var opNum = parseInt(opStr);

var str = "";
if (opNum >= 4000) {
str = "踊";
}
if (opData && (i < opData.length)) {
str = forms[parseInt(opData.charAt(i))].slice(23);
}

var html;
if (str.length > 0) {
html = "<div id='divTr" + opStr;
html += "' class='clsTrainSIF clsHide'>" + str + "</div>";
$("divTrain").innerHTML += html;
}
else {
html = "<div id='divTr" + opStr;
html += "' class='clsTrain clsHide'></div>";
$("divTrain").innerHTML += html;
}
$("divTr" + opStr).style.backgroundColor = "#a0a0a0";
html = "<div id='divTN" + opStr;
html += "' class='clsHide'>" + opStr + "</div>";
$("divTrain").innerHTML += html;
}

// 列車表示更新
function updateTrains() {
var td = daySec;
if (td < 10800) td = 10800;
for (var i = 0; i < diaData.length; i++) {
updateTrain(i, td);
}
}
function updateTrain(j, td) {
var dia = diaData[j];
var opStr = dia[0].slice(0, 4).replace(/^ +/, "");
var isDown = false;
var isOp = false;
var t0 = 0;
var t1 = 0;
var s0 = 0;
var s1 = 0;
for (var i = 0; i < dia.length; i++) {
t0 = parseInt(dia.slice(8, 12), 10);
t0 = (~~(t0 / 100) * 60 + (t0 % 100)) * 60;
if ((i == 0) && (td < t0 - 300)) break;
t1 = parseInt(dia.slice(12, 16), 10);
t1 = (~~(t1 / 100) * 60 + (t1 % 100)) * 60;
if (i + 1 == dia.length) {
if (t1 + 300 < td) continue;
}
else {
var t2 = parseInt(dia[i + 1].slice(8, 12), 10);
t2 = (~~(t2 / 100) * 60 + (t2 % 100)) * 60;
if ((t1 + t2) / 2 < td) continue;
}
isOp = true;
s0 = parseInt(dia.slice(5, 6), 16) - 1;
s1 = parseInt(dia.slice(6, 7), 16) - 1;
isDown = (s0 < s1);
break;
}
if (isOp) {
var pos = (td - t0) / (t1 - t0);
if (td < t0) {
pos = izst[s0][0];
}
else if (t1 < td) {
pos = izst[s1][0];
}
else if (isDown) {
pos = (izst[s1][0] - izst[s0][0]) * pos + izst[s0][0];
}
else {
pos = izst[s0][0] - (izst[s0][0] - izst[s1][0]) * pos;
}
var x = isDown ? 234 : 214;
var y = 10 + pos * 2.5;
var xx = isDown ? 258 : 136;

var n = parseInt(dia.slice(0, 1));
var str = dia.slice(0, 4).replace(/^ +/, "") + (n >= 4 ? "M" : "");
if (i > 0) str += " (" + opStr + ")";
$("divTN" + opStr).textContent = str;
$("divTN" + opStr).style.left = xx + "px";
$("divTN" + opStr).style.top = (y - 6) + "px";
x += 4 - ($("divTr" + opStr).getBoundingClientRect().width) / 2;
y += 3 - ($("divTr" + opStr).getBoundingClientRect().height) / 2;
$("divTr" + opStr).style.left = x + "px";
$("divTr" + opStr).style.top = y + "px";
if (n >= 8) {
$("divTr" + opStr).style.color = "#000000";
$("divTr" + opStr).style.backgroundColor = "#ffa0ff";
}
else if (n >= 4) {
$("divTr" + opStr).style.color = "#000000";
$("divTr" + opStr).style.backgroundColor = "#ffffff";
}
else if (n == 2) {
$("divTr" + opStr).style.color = "#000000";
$("divTr" + opStr).style.backgroundColor = "#a0a0a0";
}
else if (dia.slice(0, 1) == " ") {
var f = 0;
if (opData && (j < opData.length)) {
f = parseInt(opData.charAt(j)) + 1;
}
if (f) {
$("divTr" + opStr).style.color = formColor[f - 1];
$("divTr" + opStr).style.backgroundColor = trainColor[f - 1];
}
else {
$("divTr" + opStr).style.color = "#000000";
$("divTr" + opStr).style.backgroundColor = "#60d0ff";
}
}
$("divTr" + opStr).classList.remove("clsHide");

if (isDown) {
$("divTN" + opStr).classList.remove("clsTraLeft")
$("divTN" + opStr).classList.add("clsTraRight")
$("divTN" + opStr).classList.remove("clsHide");
}
else {
$("divTN" + opStr).classList.remove("clsTraRight")
$("divTN" + opStr).classList.add("clsTraLeft")
$("divTN" + opStr).classList.remove("clsHide");
}
}
else {
$("divTr" + opStr).classList.add("clsHide");
$("divTN" + opStr).classList.add("clsHide");
}
}

// eof
</code>
そして、参考にしたサイトがこちらです。
https://chocoden.chobi.net/izuppako/izuppako_now.html
そのhtml文が、
<code>

<!doctype html>
<html lang="ja">

<head>
<meta charset="utf-8">
<meta http-equiv="content-language" content="ja">
<meta name="viewport" content="width=392">
<meta name="description" content="伊豆箱根鉄道の電車位置を表示">
<meta name="keywords" content="伊豆箱根鉄道,駿豆線,大雄山線,いずっぱこ">
<meta name="author" content="chocoden">

<title>いずっぱこ なう！</title>

<!-- いずっぱこ なう！ -->
<!-- Copyright (C) 2018 chocoden(twitter.com/chocoden) -->

<!--link rel="icon" href="favicon.ico"-->
<!--link rel="apple-touch-icon" href="apple-touch-icon.png"-->
<link rel="stylesheet" href="izuppako_now.css">
<script src="izuppako_now.js"></script>
</head>

<body>

<header>
<div id="idTitle" class="hdrTitle">いずっぱこ なう！ (駿豆線)</div>
<div id="idDateTime" class="hdrDateTime">-</div>
<div id="menu" class="menu clsHide">
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
<button id="btn4"></button>
</div>
</header>

<section id="pagePosition">
<div id="secMap" class="clsHide">
<div id="divMap">
<div id="parts01"></div>
<div id="parts02"></div>
</div>
<div id="divTrain">
</div>
</div>
</section>

<footer>
<small>Copyright &copy; 2018 chocoden</small>
</footer>

</body>

</html>
</code>

例えば、A駅に10時B駅に11時C駅に12時といった具合に、紐づけたいのです。
要するに電車が通る駅を通過・停車に関わらず全て配列に入れる方法が、不明なのです。