basti1012.bplaced.net

ich habe das Ampel css-Tutorial durch gearbeitet und möchte die Ampeln durch Eingänge schalten.

Code

                                    
                                <style>
#css-ampel {
  display: flex;
  flex-direction:column;
  width: 30px;
  height: 90px;
  border-radius: 6px;
  background: black;
  zoom: 1.7;
}

#css-ampel div{

  background: dimgrey;
  border-radius:50%;
  flex:1;
  margin:3px;
  justify-content:center;
}    

.ampelred > #ampelred{
    background: red;
    box-shadow: 0 0 20px red;
}

.ampelyellow > #ampelyellow{
    background: yellow;
    box-shadow: 0 0 20px yellow;
}

.ampelgreen > #ampelgreen{
    background: limegreen;
    box-shadow: 0 0 20px limegreen;
}

.auto >#ampelred{
  animation:red 6s linear infinite;
}
.auto >#ampelgreen{
  animation:green 6s linear infinite;
}
.auto >#ampelyellow{
  animation:yellow 6s linear infinite;
}

@keyframes red{
  0%,40%{
    background:red;
  }
  41%,89%{
      background: dimgrey;
  }
  90%,100%{
    background:red;
  }
}

@keyframes green{
  0%,40%{
    background:dimgrey;
  }
  41%,69%{
      background: green;
  }
  70%,100%{
    background:dimgrey;
  }
}

@keyframes yellow{
  0%,20%{
    background:dimgrey;
  }
  21%,40%{
      background: yellow;
  }
  41%,70%{
    background:dimgrey;
  }
  71%,90%{
       background: yellow;
  }
 91%,100%{
       background:dimgrey;
  }
}
output{
  font-size:20px;
  font-weight:900;
}
</style>



<div id="css-ampel">
  <div id="ampelred"></div>
  <div id="ampelyellow"></div>   
  <div id="ampelgreen"></div> 
  </div>
<br>
<output></output>
<br>
<button id="red">Rot</button>
<button id="yellow">Gelb</button>
<button id="green">Grün</button>
<button id="auto">Automatisch</button>
<h4>Oder mit rang um deine else if zu simulieren</h4>

<br>
<input type="range" min="0.0" max="9.0" id="ran" value="0.0">











<script>
var am=document.getElementById('css-ampel');
var re=document.getElementById('red');
var ye=document.getElementById('yellow');
var gr=document.getElementById('green');
var au=document.getElementById('auto');
var x1=document.getElementById('ran');
var ou=document.getElementsByTagName('output')[0];

re.addEventListener('click',function(){
  am.setAttribute('class','ampelred');  
  ou.innerHTML='Ampel ist rot';
})
ye.addEventListener('click',function(){
  am.setAttribute('class','ampelyellow');  
    ou.innerHTML='Ampel ist Gelb';
})
gr.addEventListener('click',function(){
  am.setAttribute('class','ampelgreen')  
    ou.innerHTML='Ampel ist Grün';
})
au.addEventListener('click',function(){
  am.setAttribute('class','auto');  
    ou.innerHTML='Ampel läuft Automatisch';
})
var color;
x1.addEventListener('change',function(){
  if(x1.value<=3){
     am.setAttribute('class','ampelred');
    color='red';
  }
   if(x1.value>=3.1 && x1.value<=6){
     am.setAttribute('class','ampelyellow');
     color='yellow';
  }
     if(x1.value>=6.1 && x1.value<=9){
     am.setAttribute('class','ampelgreen');
       color='green';
  }
  
ou.innerHTML='X1 = '+x1.value+' if in '+color;
})

</script>