以下は、JavaScriptとBootstrapを使用して作成した運行管理アプリの例です。evalや他のサイトに遷移させる、リダイレクトするような機能は含まれていません。また、入力値の検証やセキュリティに関する対策は含まれていません。自己責任においてご利用ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>運行管理アプリ</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<h1 class="text-center mb-5">運行管理アプリ</h1>
<!-- フォーム -->
<form>
<div class="form-group row">
<label for="departure" class="col-sm-2 col-form-label">出発地点</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="departure">
</div>
<label for="departure-time" class="col-sm-2 col-form-label">出発時間</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="departure-time" placeholder="タップして入力">
</div>
<button type="button" class="btn btn-primary col-sm-1 ml-3" onClick="setTime('departure-time')">今の時間</button>
</div>
<div class="form-group row">
<label for="arrival" class="col-sm-2 col-form-label">到着地点</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="arrival">
</div>
<label for="arrival-time" class="col-sm-2 col-form-label">到着時間</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="arrival-time" placeholder="タップして入力">
</div>
<button type="button" class="btn btn-primary col-sm-1 ml-3" onClick="setTime('arrival-time')">今の時間</button>
</div>
<button type="button" class="btn btn-success float-right" onClick="addToList()">追加</button>
</form>
<hr>
<!-- リスト -->
<ul id="list" class="list-group mt-5">
</ul>
</div>
<script>
// リスト用の配列
var data = [];
// 「今の時間」ボタンが押されたときに呼び出される関数
function setTime(id) {
var now = new Date();
document.getElementById(id).value = now.getHours() + ":" + now.getMinutes();
}
// 追加ボタンが押されたときに呼び出される関数
function addToList() {
// 入力値を取得
var departure = document.getElementById("departure").value;
var departureTime = document.getElementById("departure-time").value;
var arrival = document.getElementById("arrival").value;
var arrivalTime = document.getElementById("arrival-time").value;
// 入力値が空でない場合にリスト用の配列に追加
if (departure && departureTime && arrival && arrivalTime) {
var item = {
departure: departure,
departureTime: departureTime,
arrival: arrival,
arrivalTime: arrivalTime
};
data.push(item);
}
// リストを再描画
renderList();
}
// 削除ボタンが押されたときに呼び出される関数
function removeFromList(index) {
data.splice(index, 1);
renderList();
}
// リストを再描画する関数
function renderList() {
// リストのHTMLを作成
var html = "";
for (var i = 0; i < data.length; i++) {
html += '<li class="list-group-item">';
html += '<div class="d-flex justify-content-between">';
html += '<div>';
html += '<p>' + data[i].departure + ' から ' + data[i].arrival + ' まで</p>';
html += '<p>' + data[i].departureTime + ' ～ ' + data[i].arrivalTime + '</p>';
html += '</div>';
html += '<button type="button" class="btn btn-danger" onClick="removeFromList(' + i + ')">削除</button>';
html += '</div>';
html += '</li>';
}
// リストを表示
document.getElementById("list").innerHTML = html;
}
</script>
</body>
</html>
ジョーク要素：出発時間や到着時間に現在時刻を自動入力する機能を付けたので、さっそく役立てて現在位置から宇宙船で海外旅行したいけど出発時刻を過ぎてしまった人たちに大人気です。
