このトラフィックライトシーケンスはどのように自動化されますか？

Question

document.getElementById('AllButton').onclick = switchAll; 
 

 
function illuminateRed() { 
 
    clearLights(); 
 
    document.getElementById('stopLight').style.backgroundColor = "red"; 
 
} 
 

 
function illuminateOrange() { 
 
    clearLights(); 
 
    document.getElementById('slowLight').style.backgroundColor = "orange"; 
 
} 
 

 
function illuminateGreen() { 
 
    clearLights(); 
 
    document.getElementById('goLight').style.backgroundColor = "green"; 
 
} 
 

 
function illuminateRedOrange() { 
 
    clearLights(); 
 
    document.getElementById('stopLight').style.backgroundColor = "red"; 
 
    document.getElementById('slowLight').style.backgroundColor = "orange"; 
 
} 
 

 
function illuminateBlack() { 
 
    clearLights(); 
 

 
} 
 

 
function clearLights() { 
 
    document.getElementById('stopLight').style.backgroundColor = "black"; 
 
    document.getElementById('slowLight').style.backgroundColor = "black"; 
 
    document.getElementById('goLight').style.backgroundColor = "black"; 
 
} 
 

 
var clickTimes = 0; 
 
var change = 1; 
 

 
function switchAll() { 
 
    clickTimes++; 
 
    switch (clickTimes) { 
 
    case 1: 
 
     clearLights(); 
 
     document.getElementById('stopLight').style.backgroundColor = "red"; 
 
     break; 
 
    case 2: 
 
     clearLights(); 
 
     document.getElementById('stopLight').style.backgroundColor = "red"; 
 
     document.getElementById('slowLight').style.backgroundColor = "orange"; 
 
     break; 
 
    case 3: 
 
     clearLights(); 
 
     document.getElementById('goLight').style.backgroundColor = "green"; 
 
     break; 
 
    case 4: 
 
     clearLights(); 
 
     document.getElementById('slowLight').style.backgroundColor = "orange"; 
 
     break; 
 
    case 5: 
 
     clearLights(); 
 
     document.getElementById('stopLight').style.backgroundColor = "red"; 
 
     break; 
 
    case 6: 
 
     document.getElementById('stopLight').style.backgroundColor = "black"; 
 
     document.getElementById('slowLight').style.backgroundColor = "black"; 
 
     document.getElementById('goLight').style.backgroundColor = "black"; 
 
     clickTimes = 0 
 
     break; 
 
    } 
 
}

body { 
 
    font-family: sans-serif; 
 
} 
 
#controlPanel { 
 
    float: left; 
 
    padding-top: 30px; 
 
} 
 
.button { 
 
    background-color: gray; 
 
    color: white; 
 
    border-radius: 10px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    margin: 90px 40px; 
 
    cursor: pointer; 
 
} 
 
#traffic-light { 
 
    height: 550px; 
 
    width: 200px; 
 
    float: left; 
 
    background-color: #333; 
 
    border-radius: 40px; 
 
    margin: 30px 0; 
 
    padding: 20px; 
 
} 
 
.bulb { 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: #111; 
 
    border-radius: 50%; 
 
    margin: 25px auto; 
 
    transition: background 500ms; 
 
}

<div id="controlPanel"> 
 
    <h1 id="AllButton" class="button">Switch</h1> 
 
</div> 
 
<div id="traffic-light"> 
 
    <div id="stopLight" class="bulb"></div> 
 
    <div id="slowLight" class="bulb"></div> 
 
    <div id="goLight" class="bulb"></div> 
 
</div>

こんにちは、これは私のトラフィックライトシーケンスであり、それはうまく動作しますが、しかし、私は停止して行くと言うと、外出先である場合は1を言うボタン一つで、私はそれを自動化する可能性がどのように思っていました押されて、それはループを維持しますか？読んでいただきありがとうございます。

Answer 1

コメントで言われたように、私はsetIntervalを使います。しかし、これをコードに入れるために、私はこの例を作った。さらに、私はライトをオブジェクトに入れて、それをもう少しコンパクトにしました。

/* 
 
    neat light object 
 
*/ 
 
function Light(color, element) { 
 
    this.color = color; 
 
    this.element = document.getElementById(element); 
 
} 
 
Light.prototype = { 
 
    on: function() { 
 
    this.element.style.backgroundColor = this.color; 
 
    }, 
 
    off: function() { 
 
    this.element.style.backgroundColor = "black"; 
 
    } 
 
} 
 

 
/* 
 
init 
 
*/ 
 
var lights = [new Light("green", "goLight"), 
 
    new Light("orange", "slowLight"), 
 
    new Light("red", "stopLight") 
 
]; 
 

 
var sequence = [["green"],["green", "orange"],["red"]], 
 
    position = 0, 
 
    timer = null; 
 

 
var go = document.getElementById("go"), 
 
    stop = document.getElementById("stop"); 
 

 
go.onclick = function() { 
 
    clearTimeout(timer); 
 
    timer = setInterval(function() { 
 

 
    lights.forEach(function(light) { 
 
     if (sequence[position].indexOf(light.color) > -1) light.on(); 
 
     else light.off(); 
 
    }); 
 
    
 
    if (position++ >= sequence.length-1) position = 0; 
 
    
 

 
    }, 2000); 
 
} 
 
stop.onclick = function() { 
 
    clearTimeout(timer); 
 
}

body { 
 
     font-family: sans-serif; 
 
} 
 

 
     #controlPanel { 
 
     float: left; 
 
     padding-top: 30px; 
 
} 
 

 
     .button { 
 
     background-color: gray; 
 
     color: white; 
 
     border-radius: 10px; 
 
     padding: 20px; 
 
     text-align: center; 
 
     margin: 90px 40px; 
 
     cursor: pointer; 
 
} 
 

 
     #traffic-light { 
 
    height: 550px; 
 
     width: 200px; 
 
     float: left; 
 
     background-color: #333; 
 
     border-radius: 40px; 
 
     margin: 30px 0; 
 
     padding: 20px; 
 
} 
 

 
     .bulb { 
 
    height: 150px; 
 
     width: 150px; 
 
     background-color: #111; 
 
     border-radius: 50%; 
 
     margin: 25px auto; 
 
     transition: background 500ms; 
 
}

<div id="controlPanel"> 
 
     <h1 id="go" class="button">Go</h1> 
 
     <h1 id="stop" class="button">Stop</h1> 
 
    </div> 
 
     <div id="traffic-light"> 
 
     <div id="stopLight" class="bulb"></div> 
 
     <div id="slowLight" class="bulb"></div> 
 
     <div id="goLight" class="bulb"></div> 
 
    </div>