前端菜鸟の每天一个小呆木---红绿灯

来源：互联网发布：手机搬家软件编辑：程序博客网时间：2024/05/16 01:59

html代码

<div id="lightdiv">    <li></li>    <li></li>    <li></li></div>

css代码

#lightdiv{    border: 2px solid grey;    height:50px;    width: 100px;    margin-left: 20%;    border-radius: 30%;}#lightdiv li{    height: 20px;    width: 20px;    border-radius: 50%;    border: 2px solid grey;    float: left;    list-style: none;    margin-left: 6px;    margin-top: 12px;}

js代码

 var colorArr=["red","green","yellow"];//定义一个数组让其接收灯的颜色    liNodes=document.getElementsByTagName("li");//获取li    duration=3000;//定义时间周期为3秒    liNodes[0].style.backgroundColor=colorArr[0];//页面加载的时候红灯亮    timer=null;    index=1    timer = setInterval(function () {        [].forEach.call(liNodes,function(newbg){            //forEach可以调用数组的每一个元素，但是该数组不能为空[]；            // .call()可以将它的第一个参数（liNodes）替换掉空数组[]           // 网传功能总结---.forEach.call是一种快速的方法访问forEach，并将空数组的this换成想要遍历的list            newbg.style.backgroundColor = "#fff";        })        liNodes[index].style.backgroundColor=colorArr[index]//当遍历到第几个li时，就显示相应的颜色        // 累加下标循环        index++;        if(index>2){            index=0;        }    },duration)

菜鸟自学の每天and第一次写博客纪念一下下(≧▽≦)，开始写这个的目的是:1.希望能够坚持每天一个小呆木；2.方便整理自己学的东西;（ps:技术菜，轻喷;）

阅读全文

0 0