カウントダウンタイマーを作成してページ上に表示する | JavaScript Tech Memo

スポンサーリンク
スポンサーリンク

JavaScriptで「カウントダウンタイマー」を作成してページ上に表示する方法

イベントや締め切りの表示に役立つカウントダウンタイマーをJavaScriptで作成する方法を解説します。この記事では、基本的なカウントダウンの実装方法と、それをページ上に表示するための手順を紹介します。さらに、他の実装方法やライブラリを使用した方法と比較し、最適なアプローチを説明します。

カウントダウンタイマーの基本的な実装

まず、純粋なJavaScriptを使用してカウントダウンタイマーを実装します。このタイマーは、特定の日付までの残り時間を秒単位で計算し、表示します。

実際の実行例

この実装では、特定の日付までの残り時間を毎秒更新し、days、hours、minutes、secondsの形で表示します。

HTMLとJavaScriptのコード


<!-- HTML -->
<div class="countdown" id="countdown"></div>

<!-- JavaScript -->
const targetDate = new Date("2030-12-31T00:00:00").getTime();
const countdownTimer = setInterval(function() {
  const now = new Date().getTime();
  const distance = targetDate - now;

  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("countdown").innerHTML =
    days + "日 " + hours + "時間 " + minutes + "分 " + seconds + "秒";

  if (distance < 0) {
    clearInterval(countdownTimer);
    document.getElementById("countdown").innerHTML = "カウントダウン終了";
  }
}, 1000);

カウントダウンライブラリの使用

ライブラリを使用すると、より簡単にカウントダウンタイマーを作成することができます。例えば、Moment.jsやcountdown.jsなどのライブラリは、時間の操作やカウントダウン機能をサポートしています。

Moment.jsを使用したカウントダウンの実装


<!-- HTML -->
<div class="countdown" id="countdown"></div>

<!-- Moment.jsライブラリの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<!-- カウントダウン用のJavaScript -->
const targetDate = moment("2024-12-31T00:00:00");
const countdownTimer = setInterval(function() {
  const now = moment();
  const duration = moment.duration(targetDate.diff(now));

  document.getElementById("countdown").innerHTML =
    duration.days() + "日 " + duration.hours() + "時間 " + duration.minutes() + "分 " + duration.seconds() + "秒";

  if (duration.asMilliseconds() <= 0) {
    clearInterval(countdownTimer);
    document.getElementById("countdown").innerHTML = "カウントダウン終了";
  }
}, 1000);

Moment.jsを使用することで、日付の操作が簡単になります。また、他のライブラリと組み合わせてカウントダウンをより高度に制御できます。

カウントダウン機能の比較

実装方法 特徴 利点 欠点
純粋なJavaScript JavaScriptのみでカウントダウンを実装 軽量で柔軟性が高い コードがやや長くなる
Moment.js ライブラリを使用 日付や時間操作が簡単 ライブラリの読み込みが必要
countdown.js カウントダウン専用のライブラリ カウントダウンの実装が簡単 機能が限られている

まとめ

カウントダウンタイマーは、イベントや締め切りを通知するために便利な機能です。JavaScriptだけで実装する方法は、軽量でシンプルですが、ライブラリを使用することでさらに効率的に開発が可能です。プロジェクトの要件に応じて最適な方法を選択し、ページにカウントダウン機能を導入しましょう。

スポンサーリンク