ТЗ - необходимо создать HTML-страницу, на которой будет отображаться светофор и кнопка для переключения цветов. При нажатии на кнопку цвета должны меняться по порядку. <body> <div class="svet"> <div class="g" id="jg"></div> <div class="y" id="jy"></div> <div class="r" id="jr"></div> </div> <button class="btn" onclick="nextColor()">next</button> </body> .svet{ border:2px solid; position:relative; display:inline-block; background:#D3D3D3; } .g{ border-radius:50px; background:#008000; width: 50px; height:50px; } .y{ border-radius:50px; background:#FFFF00; width: 50px; height:50px; } .r{ border-radius:50px; background:#FF0000; width: 50px; height:50px; } let i = -1; function nextColor(){ i++; if(i==3){ i=0; } if(i==0){ jr.style.backgroundColor="#FF0000"; jy.style.backgroundColor="#D3D3D3"; jg.style.backgroundColor="#D3D3D3"; }else if(i==1){ jr.style.backgroundColor="#D3D3D3"; jy.style.backgroundColor="#FFFF00"; jg.style.backgroundColor="#D3D3D3"; }else{ jr.style.backgroundColor="#D3D3D3"
ТЗ - необходимо создать HTML-страницу, на которой будет отображаться светофор и кнопка для переключения цветов. При нажатии на кнопку цвета должны меняться по порядку.
HTML
<body>
<div class="svet">
<div class="g" id="jg"></div>
<div class="y" id="jy"></div>
<div class="r" id="jr"></div>
</div>
<button class="btn" onclick="nextColor()">next</button>
</body>
CSS
.svet{
border:2px solid;
position:relative;
display:inline-block;
background:#D3D3D3;
}
.g{
border-radius:50px;
background:#008000;
width: 50px;
height:50px;
}
.y{
border-radius:50px;
background:#FFFF00;
width: 50px;
height:50px;
}
.r{
border-radius:50px;
background:#FF0000;
width: 50px;
height:50px;
}
JS
let i = -1;
function nextColor(){
i++;
if(i==3){
i=0;
}
if(i==0){
jr.style.backgroundColor="#FF0000";
jy.style.backgroundColor="#D3D3D3";
jg.style.backgroundColor="#D3D3D3";
}else if(i==1){
jr.style.backgroundColor="#D3D3D3";
jy.style.backgroundColor="#FFFF00";
jg.style.backgroundColor="#D3D3D3";
}else{
jr.style.backgroundColor="#D3D3D3";
jy.style.backgroundColor="#D3D3D3";
jg.style.backgroundColor="#008000";
}
}
Ознакомиться с работай данного кода можно ТУТ.