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

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

ここに、たった18行のJavaScriptコードで獨自のカウントダウンクロックを作成する方法があります：

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

キーポイント

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

基本的なクロック：特定の日付または時刻

へのカウントダウン

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

有効な終了日を設(shè)定します。

• 殘りの時間を計算します。
• 時間を利用可能な形式に変換します。
再利用可能なオブジェクトとしての出力クロックデータ。
ページに時計を表示し、ゼロに到達したときにクロックを停止します。
• 有効な終了日を設(shè)定

最初に、有効な終了日を設(shè)定する必要があります。これは、JavaScriptの

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

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

短い形式：

const deadline = '2015-12-31';

または長い形式：

const deadline = '31/12/2015';

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

const deadline = 'December 31 2015';

この記事では、JavaScriptの日付形式の詳細(xì)を読むことができます。

殘りの時間を計算します

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

const deadline = '2015-12-31';

最初に、締め切り前の殘りの時間を節(jié)約する変數(shù)totalを作成します。 Date.parse()関數(shù)は、時間文字列をミリ秒?yún)g位で値に変換します。これにより、互いに2回減算し、2つの間に時間を取得できます。

const deadline = '31/12/2015';

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

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

const deadline = 'December 31 2015';

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

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

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

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

const deadline = 'December 31 2015 23:59:59 GMT+0200';

便利ですか？

時計を見せて、ゼロに達したときに停止します

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
  };
}

これで、殘りの日、時間、分、秒を出力する関數(shù)があり、時計を構(gòu)築できます。まず、クロックを保存するために次のHTML要素を作成します。

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

この関數(shù)は2つのパラメーターを取ります。それらは、私たちの時計とカウントダウンの終了時間を含む要素のIDです。関數(shù)內(nèi)では、a

const total = Date.parse(endtime) - Date.parse(new Date());

変數(shù)を宣言し、それを使用してクロックコンテナdivへの參照を保存します。これは、DOMを照會し続ける必要がないことを意味します。

次に、

const seconds = Math.floor( (t/1000) % 60 );

を使用して匿名関數(shù)を1秒あたり実行します。この関數(shù)は次のことを行います：

clock

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

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

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

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

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

初期遅延を削除

時計では、

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

渡された匿名関數(shù)を

に移動して、獨自の個別の関數(shù)に移動しましょう。この関數(shù)をsetIntervalに名前を付けることができます。 updateClock関數(shù)を外に一度呼び出して、setInterval內(nèi)部で再度呼び出します。このようにして、時計は遅滯なく表示されます。 updateClock setInterval javaScriptで、次のものを置き換えます

以下を使用してください

const deadline = '2015-12-31';

クロックの継続的な再構(gòu)築を避けてください

クロックスクリプトをより効率的にする必要があります。時計全體を毎秒再構(gòu)築するのではなく、時計の數(shù)字のみを更新したいと考えています。これを行う1つの方法は、各番號を

const deadline = '31/12/2015';

タグ內(nèi)に配置し、それらの內(nèi)容のみを更新することです。

これはhtml：

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

変數(shù)を定義した後、次のコードを追加します

const deadline = 'December 31 2015';

次に、數(shù)字のみを更新するために

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

const deadline = 'December 31 2015 23:59:59 GMT+0200';

先頭のゼロを追加します

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

たとえば、

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
  };
}

主要なゼロを「秒」値に追加するには、以下を変更します。

これについては

：

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

const total = Date.parse(endtime) - Date.parse(new Date());

注：Codepenの「Rerun」をクリックしてカウントダウンを開始する必要がある場合があります。

さらに一歩進んでください

const seconds = Math.floor( (t/1000) % 60 );

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

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

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

クロックの

プロパティを

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

関數(shù)に追加します（

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

関數(shù)を呼び出した後にのみ表示されます：

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

const deadline = '2015-12-31';

アレイ內(nèi)の各要素は、開始日と終了日を表します。上記のように、時間と時間ゾーンを含めることができますが、ここでは通常の日付を使用してコードを読み取り可能に保ちます。

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

関數(shù)に置き換える必要があります。

initializeClock

これで、手動で更新せずに時計を事前にスケジュールできます。必要に応じてコードを短くすることができます。読みやすさのために、コードを冗長にします。

const deadline = '31/12/2015';

ユーザーが到著したときに10分間のタイマーを設(shè)定します

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

変數(shù)を次のものに置き換える必要があります。

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

ここで、ユーザーが到著したときから10分後にカウントダウンする時計があります。さまざまな時間を試してみてください。

const deadline = 'December 31 2015';

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

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

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

これはロジックです：

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

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

これを達成するには、
1. 変數(shù)を次のものに置き換えます。
2. このコードでは、Cookieと正規(guī)表現(xiàn)を使用します。どちらも別々のトピックです。したがって、私はここで詳細(xì)に説明しません。注意すべきことの1つは、
を?qū)g際のドメイン名に変更する必要があることです。

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

javaScriptの日付と時刻は、ユーザーのコンピューターから取得されます。これは、ユーザーがコンピューターの時間を変更することにより、JavaScriptクロックに影響を與えることができることを意味します。ほとんどの場合、これは問題ではありません。しかし、いくつかの非常に繊細(xì)な狀況では、サーバーから取得するために時間が必要です。これは、このチュートリアルの範(fàn)囲を超えたPHPまたはAjaxで実行できます。

const deadline = 'December 31 2015 23:59:59 GMT+0200';

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

要約

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

次のステップ

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

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

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

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

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

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

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

以上がたった18行のJavaScriptでカウントダウンタイマーを構(gòu)築するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。