この記事では、JavaScriptのsetIntervalを使って一定時間間隔で信号の色を切り替えるプログラミングコードを解説します。
目次
完成形
最初に完成形を見ていきます。
緑、黄、赤の信号が3秒ごとに切り替わっています。
See the Pen javascript01 by aqua (@aqua-programdiary) on CodePen.
HTMLコーディング
HTMLのコードを解説します。
<span class="green active"></span> <span class="yellow"></span> <span class="red"></span>
<span>
要素:
円形の要素を表現するために使用されています。class="green active"
:
クラス属性にgreen
とactive
の2つのクラスが指定されています。green
クラスは緑の背景色を持つ円形を表し、active
クラスは透明度を元に戻すために使用されます。class="yellow"
:
クラス属性にyellow
クラスが指定されています。yellow
クラスは黄色の背景色を持つ円形を表します。class="red"
:
クラス属性にred
クラスが指定されています。red
クラスは赤の背景色を持つ円形を表します。
CSSコーディング
CSSのコードを解説します。
span { width: 50px; height: 50px; border-radius: 50%; display: inline-block; } .red { background-color: red; opacity: 0.2; } .yellow { background-color: yellow; opacity: 0.2; } .green { background-color: green; opacity: 0.2; } .active { opacity: 1; }
span
スタイル:
全ての<span>
要素に適用される基本スタイルが定義されています。これにより、円形の要素が表示されます。.red
、.yellow
、.green
スタイル:
各クラスに対する背景色と透明度が定義されています。これにより、各クラスに対応する背景色の円形要素が表示されます。.active
スタイル:active
クラスに対して透明度が1に設定されています。これにより、アクティブな要素は透明度が元に戻り、よりはっきりと表示されます。
JavaScriptコーディング
JavaScriptのコードを解説します。
const span = document.querySelectorAll('span'); let number = 0; function changeOpacity() { span[number].classList.remove('active'); number = (number + 1) % span.length; span[number].classList.add('active'); } setInterval(changeOpacity, 3000);
const span = document.querySelectorAll('span');
querySelectorAll
メソッドを使用して、文書内のすべての<span>
要素を取得し、span
という名前の NodeList に格納しています。let number = 0;
number
という変数を宣言し、現在表示中の<span>
要素のインデックスを保持します。function changeOpacity() { ... }
:changeOpacity
という関数を定義しています。この関数は、アクティブな要素を変更する役割を果たします。span[number].classList.remove('active');
現在アクティブな要素からactive
クラスを削除して非アクティブにします。number = (number + 1) % span.length;
number
の値を次の要素のインデックスに更新します。% span.length
は、インデックスを要素の数でループさせるための計算です。span[number].classList.add('active');
新しい要素にactive
クラスを追加して、アクティブな要素として表示します。setInterval(changeOpacity, 3000);
changeOpacity
関数を3秒ごとに呼び出すように設定します。これにより、アクティブな要素が交互に切り替わるアニメーションが実現されます。