SOURCE

//通过js改变元素的类，而不是直接改变元素的css样式


const stateList = [
  {state:'Red', last:3000},
  {state:'Yellow', last:1000},
  {state:'Green', last:3000}
];

function start(light,stateList) {
  console.log(light);
  function applyState(startIndex) {
    const {state,last} = stateList[startIndex];
    light.setAttribute('class',state);
    setTimeout(()=>{applyState((startIndex+1)%stateList.length)},last)
  }
  applyState(0);
}
const light = document.getElementById('light');
start(light,stateList);

<div id='light'>
  <div class='red'></div>
  <div class='yellow'></div>
  <div class='green'></div>
</div>

.red,.yellow,.green{
  width:100px;
  height:100px;
  border-radius:50%;
  background:gray;
  margin:10px;
}

.Red .red{
  background:red;
}

.Yellow .yellow{
  background:orange;
}

.Green .green{
  background:green;
}