前回、経過日数を自動計算するJavaScriptの記事を書きました。ランニングを再開してから何日経ったかを知るためのものです。
設定した開始日が2024年2月27日です。その日に生まれたお子さんや、何かを始めた人向けのツールなので、それ以外の人には全く意味の無いツールです。
パーソナライズさせると他の人には使えないというよい例でした。
もう少し使い勝手のよいものに改変しました。
開始日と終了日を指定する汎用性の高い日付計算ツールを貼り付けておきます。同じ記事に貼り付けるとエラーが起こったので別記事に分けました。
日数計算ツール
開始日:
終了日:
コード
はてなブログの編集画面に下記コードをそのまま貼り付ければ動きます。昨日の記事のコードと同時に貼り付けると干渉し合うようで上手く動きません。
ローカルのHTMLファイルに貼り付けるときは、<script></script>の部分を<head></head>の間に入れてください。
<script>
function calculateDays() {
// HTMLの入力フィールドから日付を取得
var startDate = document.getElementById("startDate").value;
var endDate = document.getElementById("endDate").value;
// Dateオブジェクトに変換
var start = new Date(startDate);
var end = new Date(endDate);
// 日数の差を計算（ミリ秒単位で差を取り、それを日数に変換）
var difference = end - start;
var days = difference / (1000 * 3600 * 24);
// 開始日を含むかどうかのチェックボックスを確認
if (document.getElementById("includeStart").checked) {
days += 1;
}
// 結果をHTMLの要素に表示
document.getElementById("result").innerHTML = "計算された日数: " + days + " 日";
}
</script>
<h2>日数計算ツール</h2>
<p>開始日: <input type="date" id="startDate"></p>
<p>終了日: <input type="date" id="endDate"></p>
<p><label><input type="checkbox" id="includeStart"> 開始日を含む</label></p>
<button onclick="calculateDays()">日数計算</button>
<p id="result"></p>
