【JavaScript】次回の場所開催まであと何日かをカウントダウンさせるプログラムを作りました。

※この記事は2023年3月に書いた記事を場所を変えて再公開しています。

先日の日曜日、大盛り上がりの中、初場所が終了しました。

寂しい思いをしている相撲ファンも多いかと思います。

という事で、次回三月の春場所まであと何日かをカウントダウンするプログラムを作りました。

まず、春場所の日程を調べると・・・

凄いですね！大相撲は再来年のスケジュールも完璧に出てるんですね！
https://www.sumo.or.jp/Admission/schedule/

カウントダウンプログラム

1/29の段階で、春場所までもう40日しかありません。

しかも、春場所、夏場所の場合は千秋楽から1週間後には巡業があります。

こう考えると、力士って休みが本当に少ないんですね・・・

プログラムの説明

HTML

 <div class="nexttournament">
  <div class="baloon">
    <p>令和六年春場所まであと</p>
    <p id="countdown"></p>
  </div>
</div>

「〇〇日〇〇時間〇〇分〇〇秒」の所は、JavaScriptで生成します。

CSS

.nexttournament{/*　背景のグラデーション */
background: linear-gradient(180deg, rgb(236 126 116) 25%, rgb(250,229,121) 75%);
padding:20px;
margin-bottom:20px;
overflow:hidden;
position:relative;
}
.nexttournament:before{/*　左にある芋の里 */
  background:url(../../wp-content/uploads/2023/05/imonosatoubody.png) no-repeat;
  background-size:140px;
  content:"";
  bottom:0;
  left:0;
  height:100%;
  width:140px;
  position:absolute;
}
.nexttournament .baloon{/*　吹き出し */
background:#fff;
border-radius:12px;
padding:10px 15px;
margin-left:125px;
position:relative;
}
.nexttournament .baloon:after{/*　吹き出しの始まりの三角 */
position:absolute;
bottom:20px;
left:-24px;
border:12px solid transparent;
border-right:12px solid #fff;
content:"";
}

.nexttournament .baloon p{/*　文字 */
margin-bottom:0;
font-weight:bold;
font-size:1.5em;
text-align:center;
}

@media (max-width: 1000px) {/*　横幅が1000px以下の場合 */
.nexttournament .baloon p{
font-size:1.2em;
}
}
@media (max-width: 500px) {/*　横幅が500px以下の場合 */
.nexttournament .baloon p{
font-size:1em;
}
.nexttournament:before{
  background-size:110px;
}
.nexttournament .baloon{
background:#fff;
border-radius:12px;
padding:10px 15px;
margin-left:100px;
position:relative;
}
.nexttournament{
padding:10px;
}
}

背景のグラデーションをposition:relativeで作成し、芋の里にposition:absoluteを当てることで、芋の里の位置を調整できるようにしています。

JavaScript

    // カウントダウンの目標日時を指定
    var targetDate = new Date("2023-09-10T09:05:00+09:00");

    // カウントダウンの更新処理
    function updateCountdown() {
      var currentDate = new Date();
      var timeDifference = targetDate.getTime() - currentDate.getTime();

      // カウントダウンが終了した場合
      if (timeDifference <= 0) {
        document.getElementById("countdown").innerHTML = "一月場所絶賛開催中！";
        return;
      }

      // 残りの日数、時間、分、秒を計算
      var days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
      var hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

      // カウントダウンの表示
      document.getElementById("countdown").innerHTML = days + "日 " + hours + "時間 " + minutes + "分 " + seconds + "秒";

      // 1秒ごとにカウントダウンを更新
      setTimeout(updateCountdown, 1000);
    }

    // 初回のカウントダウン更新
    updateCountdown();

targetDateという変数に2024年3月10日の午前9時5分、つまり名古屋場所の序の口の始まる時間を指定しています。

そこを変えれば他の日時とのカウントダウンになります。

最後の「+09:00」は時差です。UTC（協定世界時）から日本の標準時になるようにしています。

カウントダウンが終了すると「春場所絶賛開催中！」というテキストに変わります。

これから

既に色々な日程が出ているので、日程が出ている項目を選択するようにして
次回の○○まであと何日！
と出せるようにしたいですね。