JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでカウンターを作成・リセットする方法をわかりやすく解説

JavaScriptでカウンターを作成・リセットするには？

JavaScriptでCSSカウンターを作成したり、値を初期化（リセット）したりするには、counterReset プロパティを使用します。このプロパティは、CSSの counter-reset に対応しており、JavaScriptから動的にカウンターの状態を制御することができます。

通常、CSSカウンターは counter-increment プロパティと組み合わせて使われます。要素が現れるたびにカウンターが増加し、::before や ::after 疑似要素の content プロパティで番号として表示されます。

以下のコード例では、見出し（h2）ごとに「section」という名前のカウンターを増加させ、ボタンをクリックするとJavaScriptによってカウンターがリセットされる仕組みを確認できます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         h2:before {
            counter-increment: section;
            content: counter(section) " Quiz ";
         }
      </style>
   </head>
   <body>
      <h1>Quizzes</h1>
      <p>Change the counterIncrement</p>
      <h2>Ruby</h2>
      <h2 id="myID">Java</h2>
      <h2>PHP</h2>
      <h2>Perl</h2>
      <button onclick="display()">Reset Counter</button>
      <script>
         function display() {
            document.body.style.counterReset = "section";
         }
      </script>
   </body>
</html>

コードのポイント

  • counter-increment: section; … h2要素が表示されるたびに「section」カウンターの値が1ずつ増加します。
  • content: counter(section) " Quiz "; … カウンターの現在値に続けて「Quiz」という文字列を見出しの前に挿入します。
  • document.body.style.counterReset = "section"; … ボタンがクリックされると、body要素に対してカウンターリセットが適用され、すべての番号が初期状態に戻ります。

このように、counterReset プロパティを使えば、複数のカウンターを一度に作成・リセットすることも可能です。その場合は「counter1 counter2」のようにカウンター名をスペースで区切って指定します。目次や章立てなど、連番が必要なコンテンツを動的に扱う際に非常に便利なテクニックです。

  1. 【初心者向け】JavaScriptでカウントダウンタイマーを作成する方法を解説

    Webサイトでは、イベント開始までの残り時間やセールの締め切り表示など、カウントダウンタイマーを設置したい場面は数多くあります。JavaScriptでは、DateオブジェクトとsetInterval()メソッドを組み合わせるだけで、誰でも簡単にカウントダウンタイマーを実装できます。 ここでは、指定した日時までの残り時間を「日・時・分・秒」の形式でリアルタイムに表示するサンプルコードを紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content=&

  2. JavaScriptで定数を作成する方法とは？constキーワードの使い方を実例付きで解説

    JavaScriptで定数を作成するには、constキーワードを使用します。constで宣言された変数は、一度値を代入すると後から再代入することができません。もし再代入を試みると、TypeErrorエラーが発生します。定数作成のコード例以下は、JavaScriptでconstを使って定数を作成し、その値を変更しようとしたときの挙動を確認できるサンプルコードです。サンプルコード<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma,