Achieve traffic light effect

Main structure

<ulID= "Traffic">    <Li><span></span></Li>    <Li><span></span></Li>    <Li><span></span></Li></ul>

Style

#traffic >li{Display:Block; }#traffic span{Display:Inline-block;width:50px;Height:50px;Background-color:Gray;margin:5px;Border-radius:50%;float: Left; }#traffic. Stop Li:nth-child (1) Span{Background-color:Yellow; }#traffic. Wait Li:nth-child (2) Span{Background-color:Red; }#traffic. Pass Li:nth-child (3) Span{Background-color:Green; }

　　　　

JS Code

Changing the class name with a timer

Const TRAFFIC = document.getElementById ("Traffic");(function  Reset () {    = "Wait";    SetTimeout (function() {        = "Stop";        SetTimeout (function() {            = "Pass";            SetTimeout (Reset,+);        },+    );}) ();

Save

Achieve traffic light effect