首页 > 编程 > JavaScript > 正文

js实现交通灯效果

2019-11-19 17:57:12
字体:
来源:转载
供稿:网友

主体结构

<ul id="traffic">  <li><span></span></li>  <li><span></span></li>  <li><span></span></li></ul>

样式

#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代码

利用定时器改变类名

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);})();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持武林网!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表