博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

交通红绿灯

Posted on 2017-02-07 17:15  程序员入门到放弃  阅读(158)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

    ul{
        list-style: none;
    }
 　 #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;
     }

    </style>
</head>
<body>
<ul id="traffic">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

<script>

/*const traffic = document.getElementById("traffic");
  (function reset(){
      traffic.className = "wait";
  
      setTimeout(function(){
          traffic.className = "stop";
          setTimeout(function(){
              traffic.className = "pass";
              setTimeout(reset,2000);
         },2000);
     },2000);
 })();*/


const traffic = document.getElementById("traffic");
var stateList = ["wait", "stop", "pass"];
var currentStateIndex = 0;
setInterval(function(){
var state = stateList[currentStateIndex];
traffic.className = state;
currentStateIndex = (currentStateIndex + 1) % stateList.length;
},2000);

</script>
</body>
</html>