HTMLの自動軽量化

ユーザーがボタンをクリックしたときに信号灯の色を自動的に変更するHTMLプログラムを作成する必要があります。HTMLの自動軽量化

ユーザーが3つのボタンの1つをクリックしたときに信号のレイアウトが変更され、色が変更されました。

ボタンをクリックしたときに誰かが自動的に明るくなるように手伝ってもらえますか？

赤色（2秒間待つ）、黄色（2秒間待つ）、緑色に点灯してください。

これを行う方法を調べようとしましたが、解決策が見つからないようです。私が見つけたのは、1つのボタンで1つの色を変更する方法でした。

document.getElementById('stopButton').onclick = stopRed; 
 
document.getElementById('slowButton').onclick = slowYellow; 
 
document.getElementById('goButton').onclick = goGreen; 
 
document.getElementById('clearLights').onclick = clearLights; 
 
document.getElementById('autoLights').onclick = setTimeout(autoLights, 3000); 
 

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

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

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

 

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

 
function autoLights() { 
 
    alert('Hello'); 
 
}

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; 
 
}

<html> 
 
<div id="controlPanel"> 
 
    <h1 id="stopButton" class="button">Stop</h1> 
 
    <h1 id="slowButton" class="button">Slow</h1> 
 
    <h1 id="goButton" class="button">Go</h1> 
 
    <h1 id="clearLights" class="button">Clear</h1> 
 
    <h1 id="autoLights" class="button">Auto</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> 
 

 
</html>

出典

2017-03-07 Anonymous User

何が望ましい動作ですか？赤く点灯し、次に黄色く、緑色に点灯しますか？ –

あなたが直面している問題は何ですか？あなたはどこで立ち往生しますか？ SOは "私のためのコードを書いてください"ではありません –

HTMLはこれとほとんど関係がなく、すべてjavascriptで完了しています。 HTMLはプログラムやプログラミング言語ではありません。 – Rob

私はあなた（autoLights）関数を変更

 var counter = 2; 
 
     var timerId = 0; 
 

 
     document.getElementById('stopButton').onclick = stopRed; 
 
     document.getElementById('slowButton').onclick = slowYellow; 
 
     document.getElementById('goButton').onclick = goGreen; 
 
     document.getElementById('clearLights').onclick = clearLights; 
 
     document.getElementById('autoLights').onclick = autoLights; 
 

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

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

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

 

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

 
     function autoLights() { 
 
      stopRed(); 
 
      timerId = setInterval(timer, 2000); 
 
     } 
 

 
     function timer() { 
 
      if (counter == 1) 
 
       stopRed(); 
 
      if (counter == 2) 
 
       slowYellow(); 
 
      if (counter == 3) 
 
       goGreen(); 
 
      counter++ 
 
      if (counter > 3) 
 
       counter = 1; 
 
     }

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="stopButton" class="button">Stop</h1> 
 
     <h1 id="slowButton" class="button">Slow</h1> 
 
     <h1 id="goButton" class="button">Go</h1> 
 
     <h1 id="clearLights" class="button">Clear</h1> 
 
     <h1 id="autoLights" class="button">Auto</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>

出典

2017-03-08 07:15:46

コードにエラーがあります.. –

エラーはありません... firebugでテスト済み –

コンピュータは犬だった。ありがとう –

私は、カウントのために再帰関数でそれをしたいです。私はあなたにお手伝いしたいと思います。下に機能があることに気付きました。これはうまくいくはずです（あなたが質問をよく変更したことがわかりました。私はあなたが望むようにタイムアウトを2秒間変更しました。）あなたの質問には十分：

document.getElementById('stopButton').onclick = stopRed; 
 
document.getElementById('slowButton').onclick = slowYellow; 
 
document.getElementById('goButton').onclick = goGreen; 
 
document.getElementById('Lights').onclick = Lights; 
 
document.getElementById('autoLights').onclick = autoLights; 
 

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

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

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

 

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

 

 
function lightOne(num){ 
 
\t Lights(); 
 
    switch(num) { 
 
     case 1: 
 
      stopRed(); 
 
      break; 
 
     case 2: 
 
      slowYellow(); 
 
      break; 
 
     case 3: 
 
      goGreen(); 
 
      break; 
 
     default: 
 
      alert("you made some error"); 
 
     } \t 
 
} 
 

 
counter = 0; 
 
maxSec = 3; 
 
function timer() { 
 
    setTimeout(function(){ 
 
    
 
    counter++; 
 
    lightOne(counter); 
 
    if(counter == maxSec) { 
 
     return; 
 
    } 
 
    timer(); 
 
    }, 2000); 
 
} 
 

 
function autoLights() { 
 
    counter = 1; 
 
    lightOne(counter); 
 
    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; 
 
}

<html> 
 

 
<div id="controlPanel"> 
 
    <h1 id="stopButton" class="button">Stop</h1> 
 
    <h1 id="slowButton" class="button">Slow</h1> 
 
    <h1 id="goButton" class="button">Go</h1> 
 
    <h1 id="Lights" class="button">Clear</h1> 
 
    <h1 id="autoLights" class="button">Auto</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> 
 

 

 

 
</html>

出典

2017-03-07 11:51:07

にエラーがあります。 lineno "：156、 " colno "：3 –

フォールト・エラーはありません... firefoxのfirebugとchromeのdevtoolsでテストされています...ここからコピーしている間違いをしています。 https://codeshare.io/GLj6Dl –

コードが正常に動作しています –

HTMLの自動軽量化

答えて

関連する問題