JavaScriptでカウントダウンタイマーを構築する方法

投稿日: 2022-04-20 2022-04-20
タグ: javascript

序章

カウントダウンタイマーは多くの目的に役立ちます。彼らは、ユーザーが何かをしている時間や、新しいWebサイトの立ち上げなどのイベントが発生するまでの時間をユーザーに伝えることができます。販売とマーケティングのコンテキストでは、彼らは回心を促すための切迫感を生み出すことができます。

このチュートリアルでは、純粋なJavaScriptでカウントダウンタイマーを作成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

マシンにインストールされているNodeの最新バージョン。 Nodeをインストールするには、このNode.jsチュートリアルのインストール方法に概説されている手順に従ってください。
JavaScriptでコーディングする方法と呼ばれるこのシリーズで見つけることができるJavaScriptでのコーディングの基本的な理解

ステップ1—はじめに

フロントエンドライブラリを使用せずにJavaScriptを最も純粋な形式で使用するため、実行する必要のあるブートストラップはそれほど多くありません。

標準の定型HTMLスターターコードを使用してindex.htmlファイルを作成します。

index.html

<!DOCTYPE html>
<html>
  <body>

  </body>
</html>

<body>内に<div>を追加します。 <div>では、idを"countdown"に設定する必要があります。

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
  </body>
</html>

後で、JavaScriptカウントダウンタイマーの出力はこの<div>内に配置されます。 <div>の下に、<script>タグを含めます。 <script>タグには、JavaScriptコードが格納されます。

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
    <script>

    </script>
  </body>
</html>

HTMLを配置したら、JavaScriptを使用したカウントダウンタイマーのコーディングに進む準備ができています。次のステップでは、カウントダウンの残り時間を計算します。

ステップ2—残り時間を計算する

残り時間を計算する前に、countdownTimerという関数を作成します。

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="countdown"></div>
    <script>
      function countdownTimer() {
    
      }
    </script>
  </body>
</html>

残り時間を計算するには、現在の時間とカウントダウンタイマーが期限切れになる時間の差を見つける必要があります。 countdownTimer関数内で、differenceという定数変数を作成します。以下のコードスニペットでは、differenceは、2021年の正月と現在の日付の差に等しく設定されます。

index.html

function countdownTimer() {
  const difference = +new Date("2021-01-01") - +new Date();
}

new Dateは日付オブジェクトを作成します。 new Dateの前の+は、JavaScriptにオブジェクトを整数としてキャストするように指示する省略形です。これにより、エポックからのマイクロ秒で表されるオブジェクトのUnixタイムスタンプが得られます。

difference定数変数の下に、remainingという変数を作成します。 remainingは"Time's up!"メッセージと同じに設定されます。

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";
}

時間がなくなり、カウントダウンタイマーが終了すると、remainingのメッセージが表示されます。

カウントダウンタイマーの残り時間がすべて設定されました。残り時間（difference）はミリ秒単位で計算されます。次に、残り時間を日、時間、分、秒にフォーマットする必要があります。

ステップ3—日、時間、分、秒にフォーマットする

カウントダウン時間が経過するまでの合計ミリ秒数を計算したら、ミリ秒数をより人間が読める形式に変換する必要があります。これを行う前に、ifステートメントを作成する必要があります。

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";
  
  if (difference > 0) {

  }
}

differenceが0より大きい場合（正月でない場合）、次のコードが実行されます。

これで、ミリ秒を日、時間、分、秒に変換できます。これを行うには、除算、乗算を実行し、モジュラス%演算子を使用する必要があります。

定数変数名partsでオブジェクトを作成します。オブジェクトのキーはdays、hours、minutes、およびsecondsである必要があり、対応する値は変換する必要のある式と一致する必要があります適切な時間単位までのミリ秒。以下のコードスニペットは、これらの方程式を示しています。

index.html

if (difference > 0) {
  const parts = {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };
}

Math.floor関数は、数値を切り捨てるために使用されます。これを設定すると、余りを削除して、各時間単位の整数値を取得できます。

残りの日、時間、分、秒でいっぱいのオブジェクトは、文字列にフォーマットする必要があります。これを行うには、remainingを再割り当てし、partsのキーの配列と等しくなるように設定します。これを行うには、Object.keysメソッドを使用します。

index.html

if (difference > 0) {
  const parts = {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };

  remaining = Object.keys(parts)
}

remainingは、partsのキーの配列と同じに設定されるようになりました。 remainingが配列になっているため、.map()メソッドを使用できます。 .map()メソッドは、remainingの各アイテムを反復処理し、各アイテムに対して機能を実行できるようにします。

index.html


if (difference > 0) {
  const parts = {
    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
    minutes: Math.floor((difference / 1000 / 60) % 60),
    seconds: Math.floor((difference / 1000) % 60),
  };

  remaining = Object.keys(parts).map(part => {

  })
}

各アイテムを文字列に変換します。各時間の単位は、「X日」の形式に従う必要があります。 partは時間の単位と一致します。実際の数値を取得するには、partsオブジェクトで角かっこ表記を使用する必要があります。対応する時間単位の数値がないかどうかをチェックするifステートメントを作成します。番号がない場合は、returnステートメントを追加します。

index.html

remaining = Object.keys(parts).map(part => {
  if (!parts[part]) return;
})

対応する番号がない場合、.map()メソッドは次の時間単位に進み、再度チェックします。

数値がある場合は、時間の単位とともに数値を返します。「X日」の形式に従う必要があることを忘れないでください。

index.html

remaining = Object.keys(parts).map(part => {
  if (!parts[part]) return;
  return `${parts[part]} ${part}`;
})

${parts[part]}は数値を返し、${part}は時間の単位を返します。現在、remainingは日、時間、分、秒の配列です。この配列は文字列である必要があります。 remainingの各アイテムは、スペースで区切る必要があります。これを実現するには、.join(" ")メソッドを使用します。

index.html

remaining = Object.keys(parts).map(part => {
  return `${parts[part]} ${part}`;
}).join(" ");

現在、countdownTimer()関数は次のようになります。

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {
    const parts = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
    remaining = Object.keys(parts).map(part => {
    return `${parts[part]} ${part}`;  
    }).join(" ");
  }
}

残り時間は、理解できる文字列と時間の単位にフォーマットされます。ただし、残り時間はまだページに表示されません。これを実現するには、DOM操作を使用する必要があります。

ステップ4—ページに残っている時間を表示する

タイムパーツを文字列にアセンブルすると、<div>を更新して値を含めることができます。これを行うには、DOM操作を使用する必要があります。

countdownTimer()関数内で、ifステートメントの下で、getElementById DOMセレクターを使用して、<div>を"countdown"：

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {
    const parts = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
    remaining = Object.keys(parts).map(part => {
    return `${parts[part]} ${part}`;  
    }).join(" ");
  }

  document.getElementById("countdown")
}

この<div>の内容を変更するには、document.getElementById("countdown")に付加された.innerHTMLプロパティも使用する必要があります。このDOMセレクターをremainingと等しく設定します。

index.html

document.getElementById("countdown").innerHTML = remaining;

これで、countdownTimer()機能が完了しました。実行する関数を呼び出します。

index.html

function countdownTimer() {
  const difference = +new Date("2020-01-01") - +new Date();
  let remaining = "Time's up!";

  if (difference > 0) {
    const parts = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    };
    remaining = Object.keys(parts).map(part => {
    return `${parts[part]} ${part}`;  
    }).join(" ");
  }

  document.getElementById("countdown").innerHTML = remaining;
}

countDownTimer();

これで、カウントダウン時間をHTMLページに表示する準備が整いました。時間が更新されないことに気付くかもしれません。カウントダウンタイマーが自動的に更新されるようにするために追加するコードはまだまだあります。

ステップ5—タイマーを自動的に更新する

これまで、現在の時刻とカウントダウンの有効期限が切れる時刻との時間差を計算しました。その時間を時間、分、秒に分割し、残り時間でページを更新しました。ただし、タイマーは現在自動的に更新されません。

ページを定期的に更新する追加のロジックがないと、タイマーは次にページが読み込まれるまでその場に留まります。更新がなければ、それをタイマーとして説明するのは難しいです。

これは、setIntervalメソッドを使用して解決できます。 setIntervalメソッドを使用し、countdownTimerと1000を2つの引数として渡します。

index.html

countdownTimer();
setInterval(countdownTimer, 1000);

これで、countdownTimerが毎秒（または1000ms）実行され、タイマーの表示が更新されます。

結論

このチュートリアルでは、純粋なJavaScriptを使用してカウントダウンタイマーを作成しました。 .map()やsetIntervalなどの方法を使用しました。これらのメソッドについてさらに詳しく知りたい場合は、 .map（）を使用してJavaScriptで配列アイテムを反復処理する方法およびsetTimeoutおよびsetIntervalを使用したJavaScriptでのタスクのスケジューリング ]が役立つ場合があります。

このプロジェクトが完了したら、次の素晴らしいステップはReactをミックスに追加することです。このReactフックを使用してカウントダウンタイマーを作成する方法チュートリアルは、開始するのに最適な場所です。

getdocs

13036