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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!