自動で日数を数える！あなたの進捗ブログに追加すべきJavaScriptコード

超個人的なJavaScriptの便利ツールをご紹介します。

走り始めてから何日だったっけとすぐに振り返れるような日数計算ツールです。私以外の誰が得するのか謎なツールですが、日付とタイトルを変更すればみんなに便利になツールになりそうです。

用途に合わせてでカスタマイズできるように、下記にコードを貼っています。日付とタイトルを変更すれば、そのままのブログに貼り付けることが可能です。

走り出してから今日で何日？
コードの使い方
まとめ

走り出してから今日で何日？

↑ JavaScriptによる自動計算数値です

（2024年2月27日からランニング再開）

△や□のマークが走った日（2024年4月24日現在）

コードの使い方

コードの改変方法

コードの下記の部分を変更してください

開始日を変更（月は0が1月を、1が2月を示すそうです。謎仕様です）
開始日を日数に含めないときは-1をけす
表示する文字を編集
タイトルを変更

JavaScriptコードはこちら（展開して確認してください）

コード（クリックで展開）

<script>
document.addEventListener("DOMContentLoaded", function() {
    calculateDays();
});

function calculateDays() {
    // 今年の2月27日の日付を設定
    var year = new Date().getFullYear();
    var startDate = new Date(2024, 1, 27); // 月は0から始まるため、1は2月を意味する

    // 今日の日付
    var endDate = new Date();

    // 日数の差を計算（ミリ秒単位で差を取り、それを日数に変換し、開始日を含めるために1を加算）
    var difference = endDate - startDate;
    var days = Math.floor(difference / (1000 * 3600 * 24)) + 1;

    // 結果をHTMLの要素に表示
    document.getElementById("result").innerHTML = "走り始めてから今日で " + days + " 日";
}
</script>

<h2>日数計算ツール</h2>
<p id="result"></p>

コードの修正（2024年4月24日）

日数の計算結果が一日多くなっていました。関数をMath.ceil からMath.floorに変更することで、正しい日数になりました。

上記のコードは修正済みです。

関数	説明
`Math.round`	数値を最も近い整数に四捨五入します。
`Math.floor`	数値の小数点以下を切り捨てて、最も近い小さい整数にします。
`Math.ceil`	数値の小数点以下を切り上げて、最も近い大きい整数にします。