Ampeln Schalten
ich habe das Ampel css-Tutorial durch gearbeitet und möchte die Ampeln durch Eingänge schalten.
Der hier verwendete 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>