html,body {
height: 100%;
overflow: hidden;
background: black;
-webkit-user-select: none;
}
ul {
list-style-type: none;
padding: 0;
margin-left: 12px;
}
ul >li {
width: 40px;
height: 40px;
border-radius: 50%;
opacity: 0.3;
display: inline-block;
}
ul.red >#red,
ul.green >#green,
ul.yellow >#yellow {
opacity: 1.0;
}
#red {background: red;}
#yellow {background: yellow;}
#green {background: lime;}
</style>
<title>js red green light</title>
<body>
<ul id="traffic" class="green">
<li id="green"></li>
<li id="yellow"></li>
<li id="red"></li>
</ul>
</body>
setInterval(function(){
setTimeout(function(){
traffic.className='green';
setTimeout(function(){
traffic.className='yellow';
setTimeout(function(){
traffic.className='red';
},500)
},500)
},500)
},1500)