这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 实现交通灯效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
主体结构
- <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);
- })();
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0526/328545.html