長文になりますが、出発駅と到着駅設定できないものを途中駅の設定ができるようにしたいです。
おそらく下記の1Dは、上から下へという意味で、D1は、下から上へという意味だと思います。
但し、これの弱点は、出発駅と到着駅の指定はできても、
途中駅の時間指定はできず、プログラム上、出発駅と到着駅の所用時間と、距離から計算して、列車を配置していくので、
途中駅は、どの列車も通る時間は同じになってしまいます。
これを列車ごとに異なるようにするにはどのようにすればいいのでしょうか。
また、途中駅での停車時間が1分であるなど、途中で列車の動作を止めて停車させ、時間は動かせたままといった設定は、このプログラムでは無理なのでしょうか。
ちなみに、例えば、var diaDataの、" 1 1D 05430620",の、1Dの後ろの8桁の数字のうち、4桁目までが、出発時刻、後ろ4桁が到着時刻です。
<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",
この間省略
]
];
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 軌",
この間省略
];
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[i].classList.add("clsHide");
}
els = $tags("button");
for (i = 0; i < els.length; i++) {
els[i].classList.remove("btnDisable", "btnEnable", "btnHide");
els[i].setAttribute("disabled", false);
els[i].removeAttribute("disabled");
els[i].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[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
</javascript>