JavaScript是一種廣泛使用的程式語言，許多網路開發人員使用它來建立互動式動態網頁。其中，JavaScript中的 DOM（Document Object Model）物件提供了一些有趣的方法和屬性來操縱HTML元素。在本文中，我們將透過這種方法來創建一個有趣的三色燈，並學習如何使用JavaScript操縱HTML元素。
首先，我們需要在HTML中建立一個燈的容器，並在其中加入三個圓形元素，以表示紅、黃和綠燈。我們可以使用CSS樣式來為這些元素設定寬度、高度和顏色。
在設定了初始的HTML和CSS之後，接下來我們將使用JavaScript程式碼來操縱這些燈。我們將建立一個名為「setLight」的函數，該函數將用於控制三個燈的狀態。
首先，我們需要定義一個名為「cur」的變量，用於追蹤當前燈的狀態。我們將其設為0，表示初始狀態為紅燈亮。
var cur = 0; // 初始状态为0：红灯亮
接下來，我們將建立一個名為「setLight」的函數。此函數將根據變數「cur」的目前值來決定哪個燈應處於亮的狀態，並將其餘燈設定為暗的狀態。我們使用classList屬性來新增和刪除燈圈上的「on」類別來實現這個功能。
function setLight() {
var redLight = document.querySelector('.red');
var yellowLight = document.querySelector('.yellow');
var greenLight = document.querySelector('.green');
switch(cur) {
case 0:
redLight.classList.add('on');
yellowLight.classList.remove('on');
greenLight.classList.remove('on');
break;
case 1:
redLight.classList.remove('on');
yellowLight.classList.add('on');
greenLight.classList.remove('on');
break;
case 2:
redLight.classList.remove('on');
yellowLight.classList.remove('on');
greenLight.classList.add('on');
break;
}
}接下來，我們將使用計時器來控制三個燈的狀態變更。我們將燈的狀態改為每隔2秒鐘一次。燈的狀態變更是透過將變數「cur」的值遞增1而實現的，並在cur的值達到3時重新設定為0。
setInterval(function() {
cur++;
if(cur >= 3) {
cur = 0;
}
setLight();
}, 2000);最後，在HTML中加入JavaScript程式碼，我們的三色燈就完成了。
如上所述，我們使用JavaScript的DOM物件方法和屬性來操縱我們在HTML中定義的元素。我們建立了一個名為「setLight」的函數來控制三個燈的狀態，然後使用計時器來週期性地呼叫該函數來更改三個燈的狀態。最終，我們創建了一個非常有趣的三色燈，透過在HTML和JavaScript之間的交互，實現了動態變化的燈光效果。
以上是javascript設定三色燈的詳細內容。更多資訊請關注PHP中文網其他相關文章！
