検索

ホームページ >ウェブフロントエンド >jsチュートリアル >たった18行のJavaScriptでカウントダウンタイマーを構築する

たった18行のJavaScriptでカウントダウンタイマーを構築する

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌オリジナル
2025-02-10 10:59:10441ブラウズ

Build a Countdown Timer in Just 18 Lines of JavaScript

JavaScriptカウントダウンクロックの構築は、イベント、プロモーション、ゲームであれ、必要になることがあります。プラグインに頼らずに、ネイティブJavaScriptを使用してクロックを構築できます。多くの優れたクロックプラグインがありますが、ネイティブJavaScriptを使用することには次の利点があります。

    コード軽量、ゼロ依存関係。
    • ウェブサイトは、外部スクリプトやスタイルシートをロードせずにパフォーマンスを向上させます。
    • より多くの制御があれば、ニーズに合わせてプラグインを曲げようとすることなく、クロックの動作を正確に制御できます。
ここに、たった18行のJavaScriptコードで独自のカウントダウンクロックを作成する方法があります：

JavaScriptの詳細な理解を得るには、本「JavaScript：Novice to Ninja、第2版」を読んでください。

キーポイント

    依存関係なしでJavaScriptを使用して軽量で効率的なカウントダウンクロックを構築でき、外部スクリプトやスタイルシートをロードせずにパフォーマンスとコントロールが向上します。
    • このプロセスには、有効な終了日の設定、残りの時間の計算、使用可能な形式に変換され、クロックデータの再利用可能なオブジェクトとして出力し、ページにクロックを表示し、ゼロに到達したときに停止することが含まれます。
    • 最初の遅延を削除し、クロック内の数字のみを更新してスクリプト効率を向上させ、必要に応じて主要なゼロを追加することにより、クロックディスプレイを最適化できます。
    • 一部のユースケースでは、クロックを自動的にスケジュールしたり、ユーザーが到着した特定の時間のタイマーを設定したり、クッキーでクロックの終了時間を節約してページ全体でクロックの進行を維持したりするなど、クロックを拡張できます。
    • 覚えておくべき重要な警告の1つ：JavaScriptの日付と時間はユーザーのコンピューターから取られます。つまり、ユーザーはコンピューターの時間を変更することでJavaScriptクロックに影響を与えることができます。非常に敏感な状況では、サーバーから時間を取得する必要がある場合があります。
基本的なクロック：特定の日付または時刻

へのカウントダウン

基本的なクロックの作成には、次の手順が含まれます

有効な終了日を設定します。
  • 残りの時間を計算します。
  • 時間を利用可能な形式に変換します。
    • 再利用可能なオブジェクトとしての出力クロックデータ。
    • ページに時計を表示し、ゼロに到達したときにクロックを停止します。
  • 有効な終了日を設定
最初に、有効な終了日を設定する必要があります。これは、JavaScriptの

メソッドを使用して、あらゆる形式で理解できる文字列である必要があります。たとえば、

ISO 8601フォーマット：Date.parse()

短い形式：

<code class="language-javascript">const deadline = '2015-12-31';</code>

または長い形式：

<code class="language-javascript">const deadline = '31/12/2015';</code>

各形式を使用すると、正確な時間とタイムゾーンを指定できます（または、ISO日付の場合、UTCからオフセットを指定します）。たとえば、

<code class="language-javascript">const deadline = 'December 31 2015';</code>
この記事では、JavaScriptの日付形式の詳細を読むことができます。

残りの時間を計算します

次のステップは、残りの時間を計算することです。特定の終了時間を表す文字列を受け入れる関数を記述する必要があります（上記のように）。次に、その時間と現在の時間の違いを計算します。以下に示すように：

<code class="language-javascript">const deadline = '2015-12-31';</code>

最初に、締め切り前の残りの時間を節約する変数totalを作成します。 Date.parse()関数は、時間文字列をミリ秒単位で値に変換します。これにより、互いに2回減算し、2つの間に時間を取得できます。 

<code class="language-javascript">const deadline = '31/12/2015';</code>

時間を利用可能な形式に変換します

ここで、ミリ秒を日数、時間、分、秒に変換したいと考えています。例として数秒かかりましょう：

<code class="language-javascript">const deadline = 'December 31 2015';</code>

ここで何が起こっているのか分解しましょう。

  1. ミリ秒を1000から秒分割します：（t/1000）
  2. 総秒数を60で割って、残りを取得します。すべての秒は必要ありません。分の後の残りの秒を計算する必要があります：（t/1000）％60
  3. それを最も近い整数に丸めます。これは、2番目の部分の分数部分ではなく、秒数が必要なためです。 Math.floor( (t/1000) % 60 ) このロジックを繰り返して、ミリ秒を数分、時間、日に変換します。
    4. 再利用可能なオブジェクトとしての出力クロックデータ

日、時間、数分、秒を準備するとき、再利用可能なオブジェクトとしてデータを返すことができます：

このオブジェクトを使用すると、関数を呼び出して計算された値を取得できます。これが残りの議事録を取得する方法の例です：

<code class="language-javascript">const deadline = 'December 31 2015 23:59:59 GMT+0200';</code>
便利ですか？

時計を見せて、ゼロに達したときに停止します
<code class="language-javascript">function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}</code>

これで、残りの日、時間、分、秒を出力する関数があり、時計を構築できます。まず、クロックを保存するために次のHTML要素を作成します。

次に、クロックデータを新しいdivに出力する関数を書き込みます：

この関数は2つのパラメーターを取ります。それらは、私たちの時計とカウントダウンの終了時間を含む要素のIDです。関数内では、a 
<code class="language-javascript">const total = Date.parse(endtime) - Date.parse(new Date());</code>
変数を宣言し、それを使用してクロックコンテナdivへの参照を保存します。これは、DOMを照会し続ける必要がないことを意味します。

次に、
<code class="language-javascript">const seconds = Math.floor( (t/1000) % 60 );</code>
を使用して匿名関数を1秒あたり実行します。この関数は次のことを行います：

clock

残りの時間を計算します。

setInterval残りの時間をdivに出力します。

    残りの時間がゼロに達した場合は、時計を停止します。
    • この時点で、以下に示すように、残りの唯一のステップはクロックを実行することです。
    • おめでとうございます！基本的なクロックを持つために、JavaScriptコードの18行しかありません。
    • 時計を表示する準備

クロックスタイルを設定する前に、少し改善する必要があります。

  • 最初の遅延を削除して、すぐにクロックが表示されるようにします。
  • クロックスクリプトをより効率的にして、クロック全体を継続的に再構築しないようにします。
    • 必要に応じて、主要なゼロを追加します。
初期遅延を削除

時計では、

を使用してディスプレイを1秒ごとに更新します。ほとんどの場合、これは問題ありませんが、最初は2回目の遅延があります。この遅延を削除するには、間隔が開始される前にクロックを1回更新する必要があります。 setInterval

渡された匿名関数を

に移動して、独自の個別の関数に移動しましょう。この関数をsetIntervalに名前を付けることができます。 updateClock関数を外に一度呼び出して、setInterval内部で再度呼び出します。このようにして、時計は遅滞なく表示されます。 updateClock setInterval javaScriptで、次のものを置き換えます

以下を使用してください 

<code class="language-javascript">const deadline = '2015-12-31';</code>
クロックの継続的な再構築を避けてください

クロックスクリプトをより効率的にする必要があります。時計全体を毎秒再構築するのではなく、時計の数字のみを更新したいと考えています。これを行う1つの方法は、各番号を
<code class="language-javascript">const deadline = '31/12/2015';</code>
タグ内に配置し、それらの内容のみを更新することです。

これはhtml：

です <span></span> <span></span>これらの要素への参照を取得しましょう。

変数を定義した後、次のコードを追加します

<code class="language-javascript">const deadline = 'December 31 2015';</code>
次に、数字のみを更新するために

関数を変更する必要があります。新しいコードは次のようになります：clock 

<code class="language-javascript">const deadline = 'December 31 2015 23:59:59 GMT+0200';</code>
先頭のゼロを追加します

updateClockクロックが毎秒再構築されなくなったので、もう1つやるべきことがあります。主要なゼロを追加します。たとえば、クロックには7秒は表示されませんが、07秒を表示します。簡単な方法は、数字の先頭に「0」文字列を追加してから、最後の2桁を切り取ることです。

たとえば、
<code class="language-javascript">function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}</code>
主要なゼロを「秒」値に追加するには、以下を変更します。

これについては

：

必要に応じて、主要なゼロを数分と時間に追加することもできます。ここまで来たら、おめでとうございます！これで表示できます。 

<code class="language-javascript">const total = Date.parse(endtime) - Date.parse(new Date());</code>
注：Codepenの「Rerun」をクリックしてカウントダウンを開始する必要がある場合があります。

さらに一歩進んでください
<code class="language-javascript">const seconds = Math.floor( (t/1000) % 60 );</code>

次の例は、一部のユースケースのクロックをスケーリングする方法を示しています。それらはすべて、上記の基本的な例に基づいています。

クロックを自動的にスケジュールします

時計をある日には、他の日ではなく、時計を表示したいとします。たとえば、今後の一連のイベントがあり、毎回クロックを手動で更新したくない場合があります。事前に物を配置する方法は次のとおりです。

クロックの

プロパティを

に設定して、時計を非表示にします。次に、次のものを

関数に追加します（

で始まる行の後）。これにより、クロックは

関数を呼び出した後にのみ表示されます：

display none次に、クロックが表示する日付範囲を指定できます。これにより、initializeClock変数：var clockを置き換えます

<code class="language-javascript">const deadline = '2015-12-31';</code>
アレイ内の各要素は、開始日と終了日を表します。上記のように、時間と時間ゾーンを含めることができますが、ここでは通常の日付を使用してコードを読み取り可能に保ちます。

schedule最後に、ユーザーがページを読み込むとき、指定された時間範囲内にあるかどうかを確認する必要があります。このコードは、以前の呼び出しを

関数に置き換える必要があります。

initializeClock

これで、手動で更新せずに時計を事前にスケジュールできます。必要に応じてコードを短くすることができます。読みやすさのために、コードを冗長にします。 
<code class="language-javascript">const deadline = '31/12/2015';</code>
ユーザーが到着したときに10分間のタイマーを設定します

ユーザーが到着したり、特定のタスクを開始したりしてから、特定の時間の間カウントダウンを設定する必要がある場合があります。ここには10分間のタイマーを設定しますが、必要な時間を使用できます。

変数を次のものに置き換える必要があります。

このコードは現在の時間を取得し、10分を追加します。値はミリ秒に変換されるため、一緒に追加して新しい締め切りに変換できます。 deadline

ここで、ユーザーが到着したときから10分後にカウントダウンする時計があります。さまざまな時間を試してみてください。 
<code class="language-javascript">const deadline = 'December 31 2015';</code>

ページ全体でクロックが進行します

現在のページだけでなく、時計の状態を保存する必要がある場合があります。ウェブサイト全体で10分間のタイマーを設定する場合は、ユーザーが別のページに移動したときにリセットする必要はありません。

1つの解決策は、クッキーのクロックの終了時間を節約することです。このようにして、新しいページに移動しても、終了時間を10分までリセットしません。

これはロジックです：

締め切りがCookieに記録されている場合、締め切りが使用されます。

Cookieが存在しない場合、Cookieに新しい期限が設定され、保存されます。

    これを達成するには、
  1. 変数を次のものに置き換えます。
  2. このコードでは、Cookieと正規表現を使用します。どちらも別々のトピックです。したがって、私はここで詳細に説明しません。注意すべきことの1つは、
    3. を実際のドメイン名に変更する必要があることです。

クライアント時間に関する別の重要な警告deadline

javaScriptの日付と時刻は、ユーザーのコンピューターから取得されます。これは、ユーザーがコンピューターの時間を変更することにより、JavaScriptクロックに影響を与えることができることを意味します。ほとんどの場合、これは問題ではありません。しかし、いくつかの非常に繊細な状況では、サーバーから取得するために時間が必要です。これは、このチュートリアルの範囲を超えたPHPまたはAjaxで実行できます。 
<code class="language-javascript">const deadline = 'December 31 2015 23:59:59 GMT+0200';</code>

サーバーから時間を取得した後、このチュートリアルで同じ手法を使用して処理できます。 .yourdomain.com

要約

この記事の例を完了した後、ごくわずかなネイティブJavaScriptコードで独自のカウントダウンタイマーを作成する方法がわかりました！基本的なカウントダウンクロックを作成し、効率的に表示する方法を学びました。また、スケジューリング、絶対時間対相対的な時間、およびページとウェブサイトのアクセスの間の状態を保存するためのCookieの使用など、いくつかの有用な追加機能も取り上げました。

次のステップ

クロックコードを使用してみてください。いくつかの創造的なスタイルや新機能（ボタンの一時停止や復元など）を追加してみてください。その後、クールな時計の例を共有したい場合は、フォーラムでお知らせください。

javascriptで日時を使用することについてよく尋ねる質問

JavaScriptで現在の日付と時刻を取得するにはどうすればよいですか？ Dateオブジェクトを使用して、現在の日付と時刻を取得できます。パラメーターなしでDateの新しいインスタンスを作成するだけで、現在の日付と時刻を表します。

JavaScriptの一般的な日付と時刻の操作は何ですか？一般的な操作には、日付のフォーマット、解析日文字列、時間間隔の計算、時間の追加または減算、および日付の比較が含まれます。

JavaScriptのタイムゾーンに対処するための推奨方法は何ですか？タイムゾーンの問題を回避するために、UTC時間をできるだけ使用するのが最善です。ユーザーに時間を表示するときは、toLocaleStringメソッドを使用し、timeZoneオプションを使用して目的のタイムゾーンを指定することを検討してください。

JavaScriptの2つの日付の違いを計算する方法は？ 2つのDateオブジェクトを2つのオブジェクトを引いて、ミリ秒で時間間隔を取得し、数学操作を使用して日数、時間、議事録などに変換できます。

JavaScriptで日付を簡単に操作できますか？はい、JavaScriptは、日付間隔を追加および減算する方法を提供します。 Dateオブジェクトには、日付操作に使用されるsetFullYear、setMonth、setDateなどのメソッドがあります。

以上がたった18行のJavaScriptでカウントダウンタイマーを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript ajax 正则表达式 html date Cookie math 字符串 var 对象 dom 样式表 display
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript Internationalization API（I18N）とは何ですか？次の記事：JavaScript Internationalization API（I18N）とは何ですか？

関連記事

続きを見る