都道府県
港
以前作ったのを貼っておきます。code.csv（コード体系）をtide736.netよりダウンロードして同じディレクトリに置いてください。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<title>一週間 潮汐表</title>
</head>
<body style="padding: 10px;">
<h1><a href=https://tide736.net/ target=_blank>tide736.net</a> 一週間 潮汐表</h1>
<hr>
<h3 style="float: left;margin: 0;padding: 0;">都道府県</h3>
<select name="category" id="category" style="float: left;margin: 0 30px 10px 5px;padding: 0;">
<optgroup label="千島列島">
<option value="0">千島列島</option>
</optgroup>
<optgroup label="北海道地方">
<option value="1">北海道</option>
</optgroup>
<optgroup label="東北地方">
<option value="2">青森県</option>
<option value="3">岩手県</option>
<option value="4">宮城県</option>
<option value="5">秋田県</option>
<option value="6">山形県</option>
<option value="7">福島県</option>
</optgroup>
<optgroup label="関東地方">
<option value="8">茨城県</option>
<option value="12">千葉県</option>
<option value="13" selected="true">東京都</option>
<option value="14">神奈川県</option>
</optgroup>
<optgroup label="中部地方">
<option value="15">新潟県</option>
<option value="16">富山県</option>
<option value="17">石川県</option>
<option value="18">福井県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
</optgroup>
<optgroup label="近畿地方">
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="30">和歌山県</option>
</optgroup>
<optgroup label="中国地方">
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
</optgroup>
<optgroup label="四国地方">
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
</optgroup>
<optgroup label="九州地方">
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
</optgroup>
<optgroup label="琉球諸島">
<option value="47">沖縄県</option>
</optgroup>
</select>
<h3 style="float: left;margin: 0;padding: 0;">港</h3>
<select name="port" id="port" style="float: left;margin: 0 0 10px 5px;padding: 0;">
<option value="">選択してください</option>
</select>
<hr style="clear: both;">
<div id="image"></div>
<script src="Tide.js"></script>
</body>
</html>
Tide.js
window.onload = function () {
// 港の選択肢
port = document.getElementById("port");
port.onchange = changePort;
}
// ジャンルの選択肢が変更された際の動作
function changePort() {
// 変更後のportを取得
var changedCategory = category.value;
var changedPort = port.value;
var image = document.getElementById('image');
document.getElementById("image").innerHTML = "";
var i = 0;
while (i < 7) {
var tomorrow = new Date();
// 日付の確認（本日日付）
console.log("取得したdateインスタンス情報：", tomorrow);
// １日未来に加算する
tomorrow.setDate(tomorrow.getDate() + i);
// 日付の確認（明日の日付）
console.log("加算後のdateインスタンス情報：", tomorrow);
var yearNum = tomorrow.getFullYear(); // not getYear()
var monthNum = tomorrow.getMonth() + 1;
var dayNum = tomorrow.getDate(); // not getDay()
var year = String(yearNum);
var month = String(monthNum);
var day = String(dayNum);
document.getElementById("image").innerHTML += "<a href=https://api.tide736.net/tide_image.php?pc=13&hc=2&yr=" + year + "&mn=" + month + "&dy=" + day + "&rg=day&w=896&h=768&lc=blue&gcs=cyan&gcf=blue&ld=on&ttd=on&tsmd=on target=_blank>" + '<img src =https://api.tide736.net/tide_image.php?pc=' + changedCategory + '&hc=' + changedPort + '&yr=' + year + '&mn=' + month + '&dy=' + day + '&rg=day&w=640&h=512&lc=blue&gcs=cyan&gcf=blue&ld=on&ttd=on&tsmd=on width=490 height=380></a>';
i = i + 1;
}
}
// 都道府県選択時に港リストを更新
function updatePorts(prefCode) {
fetch('code.csv')
.then(res => res.text())
.then(csv => {
const lines = csv.split('\n').slice(1); // 1行目はヘッダ
const ports = lines
.map(line => line.split(','))
.filter(arr => arr[0] === prefCode)
.map(arr => ({ code: arr[1], name: arr[3] }));
const portSelect = document.getElementById('port');
portSelect.innerHTML = '<option value="">選択してください</option>';
ports.forEach(port => {
const op = document.createElement('option');
op.value = port.code;
op.textContent = port.name;
portSelect.appendChild(op);
});
});
}
document.getElementById('category').addEventListener('change', function () {
updatePorts(this.value);
});
// 初期表示時にもselected都道府県の港リストを挿入
window.addEventListener('DOMContentLoaded', function () {
const select = document.getElementById('category');
const selected = select.options[select.selectedIndex].value;
updatePorts(selected);
});
コメント
コメントを投稿