javascriptカウントダウンを設置したい

Question

前提

サイトにカウントダウンを設置したいのですが、終了時間を11/28　00：00：00で設定したいのですが、
今は月末に設定されております。
以下のURLを見て設定いたしました。
https://mgmgblog.com/?p=2595

該当のソースコード

<div id="countdownArea" class="countdown">
    <span id="countdown-day"></span>日
    <span id="countdown-hour"></span>時間
    <span id="countdown-min"></span>分
    <span id="countdown-sec"></span>秒
</div>

※3行目を書き換えればよいようなのですが、うまくいきませんでした。

let countdown = setInterval(function(){
    const now = new Date()  //今の日時
    const target = new Date(now.getFullYear(), now.getMonth() + 1, 0,'23','59','59') //ターゲット日時を取得
    const remainTime = target - now  //差分を取る（ミリ秒で返ってくる

    //指定の日時を過ぎていたら処理をしない
    if(remainTime < 0) return false 

    //差分の日・時・分・秒を取得
    const difDay  = Math.floor(remainTime / 1000 / 60 / 60 / 24)
    const difHour = Math.floor(remainTime / 1000 / 60 / 60 ) % 24
    const difMin  = Math.floor(remainTime / 1000 / 60) % 60
    const difSec  = Math.floor(remainTime / 1000) % 60

    //残りの日時を上書き
    document.getElementById("countdown-day").textContent  = difDay
    document.getElementById("countdown-hour").textContent = difHour
    document.getElementById("countdown-min").textContent  = difMin
    document.getElementById("countdown-sec").textContent  = difSec

    //指定の日時になればカウントを止める
    if(remainTime < 0) clearInterval(countdown)

}, 1000)    //1秒間に1度処理

↓に変更を加えました。

以下のようにしてみたのですが、終了しましたに書き換わりませんでした。
時計表示がそのまま、表示に残っていおり、
「終了しました」は、表示されない状況です。

cssをあてるために、ほんの少しマークアップを変更したことが原因でしょうか。。。

<div id="countdownArea" class="countdown">
終了まであと...<br><br>
<span class="time_set"><span id="countdown-day"></span>Days</span><span class="point">:</span>
<span class="time_set"><span id="countdown-hour"></span>Hours</span><span class="point">:</span>
<span class="time_set"><span id="countdown-min"></span>Mins</span><span class="point">:</span>
<span class="time_set"><span id="countdown-sec"></span>Secs</span><span class="point">:</span>
</div>

let countdown = setInterval(function(){
const now = new Date() //今の日時
const target = new Date(now.getFullYear(), 10, 23, 13, 38, 00); //ターゲット日時を取得
const remainTime = target - now //差分を取る（ミリ秒で返ってくる

//指定の日時を過ぎていたら処理をしない
if(remainTime < 0) return false

//差分の日・時・分・秒を取得
const difDay = Math.floor(remainTime / 1000 / 60 / 60 / 24)
const difHour = Math.floor(remainTime / 1000 / 60 / 60 ) % 24
const difMin = Math.floor(remainTime / 1000 / 60) % 60
const difSec = Math.floor(remainTime / 1000) % 60

//残りの日時を上書き
document.getElementById("countdown-day").textContent = difDay
document.getElementById("countdown-hour").textContent = difHour
document.getElementById("countdown-min").textContent = difMin
document.getElementById("countdown-sec").textContent = difSec

//指定の日時になったら、
if (remainTime < 0) {
// カウントを止めて
clearInterval(countdown);
// メッセージを表示する
const countdownArea = document.getElementById('countdownArea'); // 追加
countdownArea.innerHTML = '終了いたしました'; // 追加
}

}, 1000)//1秒間に1度処理

Comments

[Cocode]

コードはコードブロックにいれて記載いただくようお願いします🙇
バッククォートｘ３個で挟んだ中にコードを書きます。

```html
（ここにhtmlコードを書く）
```

```javascript
（ここにjavascriptコードを書く）
```

[tokiki]

不慣れで申し訳ございません。
修正いたしました。

[Cocode]

ありがとうございます！お手数をおかけしました🙇

[tokiki]

出来ました！！！
11月は10なのですね。
初心者なもので、そんなことも分からず・・・
とても助かりました。
ありがとうございます！！大感謝です。

[tokiki]

ベストアンサーを選んだあとですみませんが、もう一つ教えていただくことは可能でしょうか？
別スレッドを立てた方がよければ、そのようにいたします。

カウントダウン終了後に
「終了いたしました」
とメッセージを表示したい場合は、どのようにしたら良いでしょうか？

[Cocode]

どこに表示したいのですかー？

[tokiki]

お返事が遅れてすみません。
カウントダウンが終了したら、
カウントダウンの表示は消して、代わりに「終了いたしました」と表示させたいです。

Answer 1

一ヶ所修正するだけでいけます。

new Date(年, 月, 日, 時, 分, 秒);

※月は0月からはじまります。11月=10です。

修正箇所

const target = new Date(now.getFullYear(), 10, 28, 00, 00, 00);

追加質問への回答

カウントダウン終了後に「終了いたしました」とメッセージを表示したい場合は、どのようにしたら良いでしょうか？

カウントを止めると同時に、HTMLを「終了しました」に書き換えてください。

  //指定の日時になったら、
  if (remainTime < 0) {
    // カウントを止めて
    clearInterval(countdown);
    
    // メッセージを表示する
    const countdownArea = document.getElementById('countdownArea'); // 追加
    countdownArea.innerHTML = '終了いたしました'; // 追加
  }

Comments

[tokiki]

以下のようにしてみたのですが、終了しましたに書き換わりませんでした。
時計表示がそのまま、表示に残っていおり、
「終了しました」は、表示されない状況です。

cssをあてるために、ほんの少しマークアップを変更したことが原因でしょうか。。。
```HTML
<div id="countdownArea" class="countdown">
終了まであと...<br><br>
<span class="time_set"><span id="countdown-day"></span>Days</span><span class="point">:</span>
<span class="time_set"><span id="countdown-hour"></span>Hours</span><span class="point">:</span>
<span class="time_set"><span id="countdown-min"></span>Mins</span><span class="point">:</span>
<span class="time_set"><span id="countdown-sec"></span>Secs</span><span class="point">:</span>
</div>
```
```javascript
let countdown = setInterval(function(){
const now = new Date() //今の日時
const target = new Date(now.getFullYear(), 10, 23, 13, 38, 00); //ターゲット日時を取得
const remainTime = target - now //差分を取る（ミリ秒で返ってくる

//指定の日時を過ぎていたら処理をしない
if(remainTime < 0) return false

//差分の日・時・分・秒を取得
const difDay = Math.floor(remainTime / 1000 / 60 / 60 / 24)
const difHour = Math.floor(remainTime / 1000 / 60 / 60 ) % 24
const difMin = Math.floor(remainTime / 1000 / 60) % 60
const difSec = Math.floor(remainTime / 1000) % 60

//残りの日時を上書き
document.getElementById("countdown-day").textContent = difDay
document.getElementById("countdown-hour").textContent = difHour
document.getElementById("countdown-min").textContent = difMin
document.getElementById("countdown-sec").textContent = difSec

//指定の日時になったら、
if (remainTime < 0) {
// カウントを止めて
clearInterval(countdown);
// メッセージを表示する
const countdownArea = document.getElementById('countdownArea'); // 追加
countdownArea.innerHTML = '終了いたしました'; // 追加
}

}, 1000)//1秒間に1度処理
```

[Cocode]

今日は11月22日なので、コードではtargetは23日と書いてるから明日にならないと…？ではなく？

[Cocode]

あ！すみません！それから

//指定の日時を過ぎていたら処理をしない
if(remainTime < 0) return false

これ削除してみてください