JavaScriptでのカウントダウンタイマーの応用。
同じタイマーを複数箇所に設置するコードと注意点

以前にカウントダウンタイマーを設置する方法やコードなどを解説しましたが、カウントダウンタイマーが使われる主なケースというのは主に2パターンあり、

• ページのトップやファーストビューに目立って載せる
• ランディングページなど申込みリンクなどの手前で何度も載せる

この2パターンが多いように感じます。
そして、後者のLPなどで「今すぐ申込」などのリンクやフォームと合わせてカウントダウンタイマーを載せる場合、何度もカウントダウンタイマーを表示させる必要が出てきます。

前回の解説では、IDを使って行う説明だったため、ページ上に1度しか使えず何度も同じカウントダウンタイマーを設置する事ができないため、今回はそれを改修した、同じページ上で何度も表示できるカウントダウンタイマーについて見ていきたいと思います。

複数設置できるカウントダウンタイマーのコード

では同じくコードを見ていきましょう。
基本となるコードは、前回のカウントダウンタイマーと同じになりそこを多少変えて使うということになります。

htmlのコード

<span class="countdown"></span>

htmlのコードは変わらずこれだけです。
以前はIDを指定していたため、同一ページで同じカウントダウンタイマーを複数設置できなかったのですが、今回classにすることで、複数設置ができるようになります。

JavaScriptのコード

前回と同じコードを踏襲しながら、必要な修正を行っています。

const target = new Date("2029/12/31 23:59:59");
const message = "終了しました。"
const elmclass = document.getElementsByClassName( "countdown" );

const timer = setInterval(function() {
  const now = new Date();
  const diff = target - now;
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
  const miliseconds = diff < 0 ? 0 :Math.floor( diff % 1000);

  for (let i = 0; i < elmclass.length; i++) {
    elmclass[i].innerHTML = `${ days }日${ String( hours ).padStart( 2, "0" ) }時間${ String( minutes ).padStart( 2, "0" ) }分${ String( seconds ).padStart( 2, "0" ) }.${ String( miliseconds ).padStart( 3, "0" ) }秒`;
  }

  if (diff < 0) {
    clearInterval(timer);
    elmclass.innerHTML = message;
  }
}, 1);

変更しているコード部分は背景色が変わったところの3箇所になります。

少しcssで調整はしたものの、このコードで作ったカウントダウンタイマーのデモページが下記になります。（同じカウントダウンタイマーを3つ設置しています）

デモページ

コードの解説

では、実際の変わったところについて見ておきましょう。
変わったところは先ほどもあったように3箇所になりますので1つ1つ見ていきましょう。

const elmclass = document.getElementsByClassName( "countdown" );

前回は、IDを取得するコードでしたが、今回はIDではなくclassを取得したいため、そのためのgetElementsBYClassNameを使い、htmlのclass名と連動させる必要がありますが、その値を取得して、絵lmclassという変数に入れています。

注意点としては、getElementsByClassNameというスペルですね。
IDの時はElementという単数系だったのですが、Classの時はElementsという複数形のスペルっています。なぜ複数形なのかというのは次に書いていきます。

for (let i = 0; i < elmclass.length; i++) {
  elmclass[i].innerHTML = `${ days }日${ String( hours ).padStart( 2, "0" ) }時間${ String( minutes ).padStart( 2, "0" ) }分${ String( seconds ).padStart( 2, "0" ) }.${ String( miliseconds ).padStart( 3, "0" ) }秒`;
}

次にここですが、その前になぜElementsという複数形なのかというと、これで取得できるのが配列（厳密に言うと配列ではなくHTMLCollectionと呼ばれるもの）になるためで、IDと違いclassは複数取得できるため、それらを指定する必要があります。

そのため、

//動きません
elmclass.innerHTML = `${ days }日${ String( hours ).padStart( 2, "0" ) }時間${ String( minutes ).padStart( 2, "0" ) }分${ String( seconds ).padStart( 2, "0" ) }.${ String( miliseconds ).padStart( 3, "0" ) }秒`;

このようにidの時と同じように書いても、正常に動かずカウントダウンタイマーも全くカウントされずその場所は真っ白での表示となってしまいます。

そのため、指定をしなければならないのですが何個使うかなどはわからないため、何個使ったとしてもあるだけ取得して表示するという繰り返し処理をここでしています。

elmclass.innerHTML = message;

最後のこの箇所のコードは変わったというよりか最初にHTMLの要素を取得するところの変数名を今回のクラス用の変数名「elmclass」へと変更したため、合わせて変更している形になります。

これら以外は以前のカウントダウンタイマーのコードと全く同じになりますが、これであれば、HTMLのコードもclassでの指定になるため、同一ページで複数箇所へ同じカウントダウンタイマーの設置が可能となります。

複数設置するカウントダウンタイマーの注意点

最後に複数設置する場合の注意点を挙げておきたいと思いますが、まず、何よりも複数設置すればするだけサイトが重くなってしまいます。

特に今回のサンプルのように、カウントダウンをより色濃くアピールする「ミリ秒」単位でグルグル回るようなカウントダウンタイマーは、非常に細かく何度も動かしていることになるため、それを複数個分設置するということになれば当然それだけ大きな負荷がかかります。

実際にミリ秒単位でのカウントダウンタイマーを5個設置してみると、そこそこスペックが高いPCであっても、ブラウザが固まりはしませんが、動作がかなりもっさりとしてしまうという事になりました。

10個設置してテストしてみたら、もはやブラウザが完全にもっさりでタブを移動したり更新をしたとしてもなかなかその反映や表示がされないくらいには固まり気味の動作になってしまいました。そのタブを消した後はブラウザも元の動作スピードに戻りました。

ミリ秒単位での表示でなく1秒単位であればほとんど問題はなかったのですが、ミリ秒単位でカウントダウンタイマーを設置するのであれば、個数はかなり限られた数で設置するという事を注意しなければなりません。

デモページでは3つ設置していますが、それでも見る端末のスペックによっては動きがもっさりになる可能性があります。

そのため、個人的にはミリ秒単位でのカウントダウンタイマーを設置するのであれば最上段やファーストビューのところに1つのみ、複数設置するのであればミリ秒単位はやめて秒単位のカウントダウンタイマーにするのが良いかなと思います。

まとめ

前回に引き続きカウントダウンタイマーを取り上げました。
意外とカウントダウンタイマーはマーケティング系も兼ねた制作をしたりコンサルをしていると、あ、このサイトだったら使った方が売上あがりそうだな…というシーンは多く出てきます。

そういった時に使える、使えないで大きく変わってくるのでとりあえず使える状態になっておく方が良いとは言えます。

実際に使う時は前回同様HTMLとCSSによる装飾をきちんとして表示していく事が必要にはなるかとは想いますが、今回の複数箇所にカウントダウンタイマーを設置するコードも、よく実際の制作で使っているものになりますので、参考にしてみてください。

ランディングページの制作やサービスサイト、通販のキャンペーンなどでよく使われますし、使えるようになっていると、そういった制作の際に提案もできるようになって一石二鳥かもしれません。