隔三行变色?

117 阅读5分钟
<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                <title>Document</title>
            </head>
<body>
    <ul id="list">
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
        <li>新能源汽车服务、信息平台互联互通、联合营销、金融合作、区块链技术服务及智慧采购等领域全面开展合作,合力打造新能源汽车服务生态圈</li>
    </ul>
    <script>
        var oUl=document.getElementById('list');
        var oLis=oUl.getElementsByTagName('li');
        for(var i=0;i<oLis.length;i++){
            console.log(oLis[i]);
            if(i%3===0){
                oLis[i].style.background='yellow';
            }else if(i%3===1){
                oLis[i].style.background='red';
            }else{
                oLis[i].style.background='yellowGreen';
            }
        }
    </script>
</body>
</html>