七彩霓虹灯 - 掘金

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
        background-color:#000000;
        
        }
        div {       
         width:200px;
         height:20px;           
         float:left;
         opacity:0;
        }
        /*red, orange, yellow, green, blue, indigo, violet*/
        #div1 {
         background-color:red;  
        }
        #div2 {
         background-color:orange;  
        }
        #div3 {
         background-color:yellow;  
        }
        #div4 {
         background-color:green;  
        }
        #div5 {
         background-color:blue;  
        }
        #div6 {
         background-color:indigo;  
        }
        #div7 {
         background-color:violet;  
        }
     
    </style>
</head>
<body>   
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
        <div id="div6"></div>
        <div id="div7"></div>
    
    <script>
        window.onload = function () {
            var divlist = document.getElementsByTagName("div");//标签选择器
            var box = 0;
            setInterval(function () {
                switch (box) {
                case 0: divlist[6].style.opacity = 0.1;divlist[0].style.opacity = 1; box++; break;
                case 1: divlist[0].style.opacity = 0.1; divlist[1].style.opacity = 1; box++; break;
                case 2: divlist[1].style.opacity = 0.1;divlist[2].style.opacity = 1; box++; break;
                case 3: divlist[2].style.opacity = 0.1;divlist[3].style.opacity = 1; box++; break;
                case 4: divlist[3].style.opacity = 0.1;divlist[4].style.opacity = 1; box++; break;
                case 5: divlist[4].style.opacity = 0.1;divlist[5].style.opacity = 1; box++; break;
                case 6: divlist[5].style.opacity = 0.1;divlist[6].style.opacity = 1; box=0; break;
            }
            }, 250)//200毫秒多久一次，没进行一次选择，相应的style就会改变
           
                   
        }
       
    </script>
</body>
    
</html>