目指すもの

現在から指定した月日までカウントダウンしたい。
指定月日になったら、 その日だけ 表示を変えたい。

実際に作ったやつ

WEBサイト
 GitHub
GitHubにあるJavaScript

JavaScript

現在の日付を 2023年12月20日、指定月日を2024年1月22日とする。

間違えていました。
ご指摘ありがとうございます。(2023年12月21日修正)

間違えていたプログラム

間違いと修正

// 表示させたい文字入れるため
let msg;

function countDown(){
    // 現在の「曜日 月 日 年 時 分 秒」を取得
    let nowDate = new Date();
    // nowDateを「1970年1月1日00時00分00秒」から何ミリ秒経過したかに変換
    let now = nowDate.getTime();
    // 現在が西暦何年か取得 (This Year)
    let tYear = nowDate.getFullYear();

    // 来年が西暦何年か
-    let nYear = tYear + 1;
+    let nYear = tYear;
    // 指定月日の月を指定
    let nMonth = 1 - 1;
    // 指定月日の日を指定
    let nDate = 22;
    
+    // 指定月日がすでに過ぎていたら、来年の月日に変更 
+    if( nowDate.getMonth() > nMonth || nowDate.getDate() > nDate ){
+        date += 1;
+    }

    // 指定月日を「曜日 月 日 年 時 分 秒」に変換
    let n = new Date( nYear, nMonth, nDate );
    // nを「1970年1月1日00時00分00秒」から何ミリ秒経過したかに変換
    let nTarget = n.getTime();

    // 現在から指定月日まであと何ミリ秒か計算
    let diffDate = nTarget - now;

    // 指定月日まであと何日か計算
    let date = Math.floor( diffDate / ( 1000 * 60 * 60 * 24 ));

-    // 年越しすると、365日を超えるから366日引く
-    if( date > 365 ){
-        date = date - 366;
-    }

    // 指定月日になった
    if( date == 0 ){
        msg = '指定月日だよ！';
    }
    // 指定月日ではない
    else{
        msg = '指定月日まで、あと' + date + '日だよ。';
    }

    // メッセージを表示
    console.log(msg);
}

// 1秒毎に「countDown()」を実行
setInterval('countDown()', 1000);

プログラム

// 表示させたい文字入れるため
let msg;

function countDown(){
    // 現在の「曜日 月 日 年 時 分 秒」を取得
    let nowDate = new Date();
    // 現在が西暦何年か取得 (This Year)
    let tYear = nowDate.getFullYear();
    // 現在が何月か取得 (This Month)
    let tMonth = nowDate.getMonth();
    // 現在が何日か取得 (This Date)
    let tDate = nowDate.getDate();

    // nowDateを「1970年1月1日00時00分00秒」から何ミリ秒経過したかに変換
    let now = new Date(tYear, tMonth, tDate).getTime();
    
    // 指定月日の年を指定
    let nYear = tYear;
    // 指定月日の月を指定
    let nMonth = 1 - 1;
    // 指定月日の日を指定
    let nDate = 22;

    // 指定月日がすでに過ぎていたら、来年の月日に変更
    if( nowDate.getMonth() > nMonth || nowDate.getMonth() == nMonth && nowDate.getDate() > nDate ){
        nYear += 1;
    }

    // 指定月日を「曜日 月 日 年 時 分 秒」に変換
    let n = new Date( nYear, nMonth, nDate );
    // nを「1970年1月1日00時00分00秒」から何ミリ秒経過したかに変換
    let nTarget = n.getTime();

    // 現在から指定月日まであと何ミリ秒か計算
    let diffDate = nTarget - now;

    // 指定月日まであと何日か計算
    let date = Math.floor( diffDate / ( 1000 * 60 * 60 * 24 ));

    // 現在から指定月日まであと何ミリ秒か再計算
    diffDate = nTarget - now;
    
    // 指定月日になった
    if( diffDate <= 0 ){
        msg = '指定月日だよ！';
    }
    // 指定月日ではない
    else{
        msg = '指定月日まで、あと' + date + '日だよ。';
    }

    // メッセージを表示
    console.log(msg);
}

// 1秒毎に「countDown()」を実行
setInterval('countDown()', 1000);

簡単な解説

多分間違えている。

本当に間違えていました。
ご指摘ありがとうございます。(2023年12月21日修正)

現在の日付を取得・処理

現在の日付を 2023年12月20日、指定月日を2024年1月22日とする。

    // 現在の「曜日 月 日 年 時 分 秒」を取得
    let nowDate = new Date();
    // 現在が西暦何年か取得 (This Year)
    let tYear = nowDate.getFullYear();
    // 現在が何月か取得 (This Month)
    let tMonth = nowDate.getMonth();
    // 現在が何日か取得 (This Date)
    let tDate = nowDate.getDate();

    // nowDateを「1970年1月1日00時00分00秒」から何ミリ秒経過したかに変換
    let now = new Date(tYear, tMonth, tDate).getTime();
    
    console.log(nowDate);
    console.log(now);
    console.log(tYear);

実行結果

Wed Dec 20 2023 00:00:00 GMT+0900 (日本標準時)
1702998000000
2023

指定月日の設定

先程も書いたように指定月日は、1月22日とする。

月を指定するときは、-1することを忘れない！！！
1月は0、2月は1のように指定していく。
詳しいこと

    // 指定月日の年を指定
    let nYear = tYear;
    // 指定月日の月を指定 -1を忘れない！！！
    let nMonth = 1 - 1;
    // 指定月日の日を指定
    let nDate = 22;
    
    // 指定月日を「曜日 月 日 年 時 分 秒」に変換
    let n = new Date( nYear, nMonth, nDate );
    // nを「1970年1月1日00時00分00秒」から何ミリ秒経過したかに変換
    let nTarget = n.getTime();

    console.log(nYear);
    console.log(n);
    console.log(nTarget);

実行結果

2023
Sun Jan 22 2023 00:00:00 GMT+0900 (日本標準時)
1674313200000

指定月日まであと何日か計算

指定月日から現在の時間を引いて、指定月日まであと何ミリ秒か求める。
上で求めたミリ秒を下の順で計算し、日に変換する。
ミリ秒 / 1000ミリ秒 → 秒 * 60秒 → 分 * 60分 → 時間 * 24時間 → 日

    // 現在から指定月日まであと何ミリ秒か計算
    let diffDate = nTarget - now;

    // 上で求めたミリ秒を日に変換
    // 指定日までの日数 = 指定月日までのミリ秒 / ( 1000 * 60秒 * 60分 * 24時間 )
    let date = Math.floor( diffDate / ( 1000 * 60 * 60 * 24 ));

    console.log(diffDate);
    console.log(date);

実行結果

-28684800000
-332

指定月日まであと-332日になってしまった。
指定月日をすでに過ぎてしまっているため、こうなってしまう。

指定月日をすでに過ぎているときの処理

このプログラムでは、現在(2023年12月20日)から指定月日(2023年1月22日)までを求めることになっている。
これでは、正しく求められないので修正する必要がある。

修正

    // 指定月日の年を指定
    let nYear = tYear;
    // 指定月日の月を指定 -1を忘れない！！！
    let nMonth = 1 - 1;
    // 指定月日の日を指定
    let nDate = 22;

+   // 指定月日がすでに過ぎていたら、来年の月日に変更
+   if( nowDate.getMonth() > nMonth || nowDate.getMonth() == nMonth && nowDate.getDate() > nDate ){
+       nYear +=  1;
+   }
    
    // 指定月日を「曜日 月 日 年 時 分 秒」に変換
    let n = new Date( nYear, nMonth, nDate );
    // nを「1970年1月1日00時00分00秒」から何ミリ秒経過したかに変換
    let nTarget = n.getTime();

    console.log(nYear);
    console.log(n);
    console.log(nTarget);

実行結果

2024
Mon Jan 22 2024 00:00:00 GMT+0900 (日本標準時)
1705849200000

もう一度、指定月日まであと何日か計算する

指定月日まであと何日か

    // 現在から指定月日まであと何ミリ秒か計算
    let diffDate = nTarget - now;

    // 上で求めたミリ秒を日に変換
    // 指定日までの日数 = 指定月日までのミリ秒 / ( 1000 * 60秒 * 60分 * 24時間 )
    let date = Math.floor( diffDate / ( 1000 * 60 * 60 * 24 ));

    console.log(diffDate);
    console.log(date);

実行結果

2851200000
33

これで正しい結果になった。

指定月日になったかどうか判定

    // 現在から指定月日まであと何ミリ秒か再計算
    diffDate = nTarget - now;
    
    // 指定月日になった
    if( diffDate <= 0 ){
        msg = '指定月日だよ！';
    }
    // 指定月日ではない
    else{
        msg = '指定月日まで、あと' + date + '日だよ。';
    }

    console.log(msg);

実行結果(指定月日前)

指定月日まで、あと33日だよ。

指定月日になったら以下の表示になる。

実行結果(指定月日)

指定月日だよ！

1秒ごとに繰り返す

あと何秒かまで表示させる予定だったが、ここでは日までなので1秒毎にやる必要はないかも。

// 1秒毎に「countDown()」を実行
setInterval('countDown()', 1000);

おまけ

あと何日だけでなく、時間も表示する

ここまでは、指定月日まで、あと何日かを表示するプログラムを作ってきた。
さらにあと何時間何分何秒まで表示させるプログラムを考えてみた。