質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

tokiki
tokiki

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3回答

0リアクション

0クリップ

174閲覧

投稿2022/11/21 09:19

編集2022/11/22 06:56

前提

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

該当のソースコード

html

<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行目を書き換えればよいようなのですが、うまくいきませんでした。

js

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をあてるために、ほんの少しマークアップを変更したことが原因でしょうか。。。

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度処理

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Cocode

2022/11/21 09:28 編集

コードはコードブロックにいれて記載いただくようお願いします🙇 バッククォートx3個で挟んだ中にコードを書きます。 ```html (ここにhtmlコードを書く) ``` ```javascript (ここにjavascriptコードを書く) ```
tokiki

2022/11/21 09:31

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

2022/11/21 09:31

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

2022/11/21 09:41

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

2022/11/21 09:54

ベストアンサーを選んだあとですみませんが、もう一つ教えていただくことは可能でしょうか? 別スレッドを立てた方がよければ、そのようにいたします。 カウントダウン終了後に 「終了いたしました」 とメッセージを表示したい場合は、どのようにしたら良いでしょうか?
Cocode

2022/11/21 10:49

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

2022/11/22 00:44

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。