列車走行位置のプログラムを作りたいです。
以下のプログラムでは、出発駅と到着駅の時刻は指定できますが、途中駅は指定できません。
1dとd1はおそらく、方向が逆という意味なのは理解できますが、それ以外は全く理解できません。
中間駅の時間の指定はできませんか。
尚、できれば、列車の時間設定は、24時間表記のままが望ましいです。
それは、24時間表記にしなければ、後で修正がややこしくなるからです。
<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 10001800", ] ]; const ADTrain = [
" 1 1D 10001640", // AB
" 1 1D 16401700", // BC
" 1 1D 17001800", // CD
];
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, "修善寺" ]
];
この間省略
// 表示設定
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[i][1]; var pos = izst[i][0]; var name = izst[i][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[i]; 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[i].slice(8, 12), 10); t0 = (~~(t0 / 100) * 60 + (t0 % 100)) * 60; if ((i == 0) && (td < t0 - 300)) break; t1 = parseInt(dia[i].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[i].slice(5, 6), 16) - 1; s1 = parseInt(dia[i].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[i].slice(0, 1)); var str = dia[i].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[i].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
質問の内容としましては、
<code>
var diaData = [
[
" 1 1D 10002000",
]
];
</code>の部分について、
10時に始発駅を出発して、20時に終着駅に到着するのはわかるのですが、
間にB駅やらC駅があった場合に何時に発車するのかが指定できないことです。
B駅を例えば、12時に出発し、C駅を14時に出発といった具合にするにはここのプログラム以外にどこのプログラムを書き換えればよろしいのでしょうか。
ちなみに、距離は同じで、列車ごとに所要時間は異なるという体です。
その場合、どの部分を修正し、どのようなプログラムを構築すればいいかわかりません。
<code>
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, "修善寺" ]
];
</code>
の値を減らしたりすると、全く列車の表示がなくなるのです。
やりたいことは、A駅と三島駅、B駅を三島小路駅という風に紐付けたいのです。
ただ、初歩レベルの知識しかないので、全文、
もしくは、変わる部分だけでもいいから全部書いていただきたいのです。
やりたいことは、A駅と三島駅、B駅を三島小路駅という風に紐付けたいのです。
電車の停車駅や通過駅を配列に組み込むのにはどうすればいいのですか。
0 コメント