JavaScriptでカウントダウンタイマーを構築する方法
序章
カウントダウンタイマーは多くの目的に役立ちます。 彼らは、ユーザーが何かをしている時間や、新しいWebサイトの立ち上げなどのイベントが発生するまでの時間をユーザーに伝えることができます。 販売とマーケティングのコンテキストでは、彼らは回心を促すための切迫感を生み出すことができます。
このチュートリアルでは、純粋なJavaScriptでカウントダウンタイマーを作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- マシンにインストールされているNodeの最新バージョン。 Nodeをインストールするには、このNode.jsチュートリアルのインストール方法に概説されている手順に従ってください。
- JavaScriptでコーディングする方法と呼ばれるこのシリーズで見つけることができるJavaScriptでのコーディングの基本的な理解
ステップ1—はじめに
フロントエンドライブラリを使用せずにJavaScriptを最も純粋な形式で使用するため、実行する必要のあるブートストラップはそれほど多くありません。
標準の定型HTMLスターターコードを使用してindex.html
ファイルを作成します。
<!DOCTYPE html>
<html>
<body>
</body>
</html>
<body>
内に<div>
を追加します。 <div>
では、id
を"countdown"
に設定する必要があります。
<!DOCTYPE html>
<html>
<body>
<div id="countdown"></div>
</body>
</html>
後で、JavaScriptカウントダウンタイマーの出力はこの<div>
内に配置されます。 <div>
の下に、<script>
タグを含めます。 <script>
タグには、JavaScriptコードが格納されます。
<!DOCTYPE html>
<html>
<body>
<div id="countdown"></div>
<script>
</script>
</body>
</html>
HTMLを配置したら、JavaScriptを使用したカウントダウンタイマーのコーディングに進む準備ができています。 次のステップでは、カウントダウンの残り時間を計算します。
ステップ2—残り時間を計算する
残り時間を計算する前に、countdownTimer
という関数を作成します。
<!DOCTYPE html>
<html>
<body>
<div id="countdown"></div>
<script>
function countdownTimer() {
}
</script>
</body>
</html>
残り時間を計算するには、現在の時間とカウントダウンタイマーが期限切れになる時間の差を見つける必要があります。 countdownTimer
関数内で、difference
という定数変数を作成します。 以下のコードスニペットでは、difference
は、2021年の正月と現在の日付の差に等しく設定されます。
function countdownTimer() {
const difference = +new Date("2021-01-01") - +new Date();
}
new Date
は日付オブジェクトを作成します。 new Date
の前の+
は、JavaScriptにオブジェクトを整数としてキャストするように指示する省略形です。これにより、エポックからのマイクロ秒で表されるオブジェクトのUnixタイムスタンプが得られます。
difference
定数変数の下に、remaining
という変数を作成します。 remaining
は"Time's up!"
メッセージと同じに設定されます。
function countdownTimer() {
const difference = +new Date("2020-01-01") - +new Date();
let remaining = "Time's up!";
}
時間がなくなり、カウントダウンタイマーが終了すると、remaining
のメッセージが表示されます。
カウントダウンタイマーの残り時間がすべて設定されました。 残り時間(difference
)はミリ秒単位で計算されます。 次に、残り時間を日、時間、分、秒にフォーマットする必要があります。
ステップ3—日、時間、分、秒にフォーマットする
カウントダウン時間が経過するまでの合計ミリ秒数を計算したら、ミリ秒数をより人間が読める形式に変換する必要があります。 これを行う前に、if
ステートメントを作成する必要があります。
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
である必要があり、対応する値は変換する必要のある式と一致する必要があります適切な時間単位までのミリ秒。 以下のコードスニペットは、これらの方程式を示しています。
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
メソッドを使用します。
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
の各アイテムを反復処理し、各アイテムに対して機能を実行できるようにします。
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ステートメントを追加します。
remaining = Object.keys(parts).map(part => {
if (!parts[part]) return;
})
対応する番号がない場合、.map()
メソッドは次の時間単位に進み、再度チェックします。
数値がある場合は、時間の単位とともに数値を返します。 「X日」の形式に従う必要があることを忘れないでください。
remaining = Object.keys(parts).map(part => {
if (!parts[part]) return;
return `${parts[part]} ${part}`;
})
${parts[part]}
は数値を返し、${part}
は時間の単位を返します。 現在、remaining
は日、時間、分、秒の配列です。 この配列は文字列である必要があります。 remaining
の各アイテムは、スペースで区切る必要があります。 これを実現するには、.join(" ")
メソッドを使用します。
remaining = Object.keys(parts).map(part => {
return `${parts[part]} ${part}`;
}).join(" ");
現在、countdownTimer()
関数は次のようになります。
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"
:
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
と等しく設定します。
document.getElementById("countdown").innerHTML = remaining;
これで、countdownTimer()
機能が完了しました。 実行する関数を呼び出します。
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つの引数として渡します。
countdownTimer();
setInterval(countdownTimer, 1000);
これで、countdownTimer
が毎秒(または1000ms)実行され、タイマーの表示が更新されます。
結論
このチュートリアルでは、純粋なJavaScriptを使用してカウントダウンタイマーを作成しました。 .map()
やsetInterval
などの方法を使用しました。 これらのメソッドについてさらに詳しく知りたい場合は、 .map()を使用してJavaScriptで配列アイテムを反復処理する方法およびsetTimeoutおよびsetIntervalを使用したJavaScriptでのタスクのスケジューリング ]が役立つ場合があります。
このプロジェクトが完了したら、次の素晴らしいステップはReactをミックスに追加することです。 このReactフックを使用してカウントダウンタイマーを作成する方法チュートリアルは、開始するのに最適な場所です。