jQueryを使って簡単にカウントダウンタイマーを実装しよう

jquery 2024/02/02

1 デモ
2 HTMLの設定
3 CSSの設定
4 jQueryの実装

jQueryを利用すると、わずかなコードで素敵なカウントダウンタイマーを作成することができます。この記事では、手軽に実装できる方法を紹介します。

デモ

指定した日時までのカウントダウンを表示します。

See the Pen Untitled by hide (@hide225) on CodePen.

HTMLの設定

基本的な構造を用意します。日数、時間、分、秒、を各spanタグにidを振り、表示していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
</head>
<body>

  <div id="countdown">
    <span id="days"></span>
    <span id="hours"></span>
    <span id="minutes"></span>
    <span id="seconds"></span>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</body>
</html>

CSSの設定

簡単なスタイルを追加して、カウントダウンが見やすくなるようにします。

#countdown {
  font-size: 2em;
  text-align: center;
  margin: 20px;
}

span {
  margin: 0 10px;
}

jQueryの実装

jQueryを使用してカウントダウンのロジックを実装します。

setIntervalを使用し、毎秒、カウントダウンまでの残り時間を取得し、表示させています。

$(document).ready(function() {
  // カウントダウンの終了日時を設定
  let countdownDate = new Date("2024-12-12T00:00:00");

  let x = setInterval(function() {
    
    // 現在の日時を取得
    let now = new Date();
    
    // カウントダウンまでの残り時間を計算
    let distance = countdownDate - now;

    // 残り時間を日数、時間、分、秒に変換
    let days = Math.floor(distance / (1000 * 60 * 60 * 24));
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // カウントダウンが終了した場合はメッセージを表示してタイマーを停止
    if (distance < 0) {
      clearInterval(x);
      $("#countdown").html("<span>カウントダウン終了</span>");
    } else {
      // 残り時間を表示
      $("#days").text(days + "日");
      $("#hours").text(hours + "時間");
      $("#minutes").text(minutes + "分");
      $("#seconds").text(seconds + "秒");
    }
  }, 1000); // 1000ミリ秒ごとに更新
});

これで、簡単ながらも見栄えの良いカウントダウンタイマーが完成しました。このコードを利用すれば、サイトやイベントのカウントダウンなど、さまざまな場面で活用できます。ぜひお試しください！

\ シェアしてね！ /