【JavaScript】一定の時間間隔で色が変わる信号機

2025年2月2日

この記事では、JavaScriptのsetIntervalを使って一定時間間隔で信号の色を切り替えるプログラミングコードを解説します。

完成形

最初に完成形を見ていきます。

緑、黄、赤の信号が３秒ごとに切り替わっています。

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秒ごとに呼び出すように設定します。これにより、アクティブな要素が交互に切り替わるアニメーションが実現されます。