转行前端：js之三行变色的N多种方案

js之三行变色的N多种方案理论上归结为以下三种方案

1、依次遍历每一个li，通过索引除以3取余数，让当前的li有不同背景颜色

2、告别一个个的判断，直接采用数组或者直接找对应样式的来完成

3、不是遍历每一个li，而是遍历每一组

但我们也知道js的写法可以千变万化

每个人的思路也都不尽相同

下面我来show code啦

Html代码

JS代码

var obox= document.getElementById('box');
var ulList= obox.getElementsByTagName('li');


//代码写法一
for(var i=0;i<ulList.length;i++){    
var n=i%3;    
var liColor=ulList[i]    
console.log(ulList[i])        
if(n===0){        
    liColor.style.backgroundColor='red';    
}else if(n===1){        
    liColor.style.backgroundColor='yellow';    
}
else {       
    liColor.style.backgroundColor='blue';   
}
}


//代码写法二
for(var i=0;i<ulList.length;i++){
   var liColor=ulList[i]    
if(i%3===0){        
     liColor.style.backgroundColor='red';   
}else{       
     liColor.style.backgroundColor='yellow';        
}}


//代码写法三
for(var i = 0;i<ulList.length;i++){    
    switch(i%3){        
        case 0:            
               ulList[i].className="bgColorPink";
               break;
        case 1:            
                ulList[i].className="bgColorRed";            
                break;        
        case 2:            
                ulList[i].className="bgColorYellow";            
                break; 
 }}


//代码写法四
var colorArray=["bgColorRed","bgColorPink","bgColorYellow"];
for(i in ulList){    
        ulList[i].className=colorArray[i%colorArray.length]
}


//代码写法五（代码四的改进版）
for(i in ulList){     ulList[i].className='bg'+(i%3);}


//代码写法六
function changeColor(){    for(var i =0;i<ulList.length;i++){             ulList[i].style.backgroundColor = i%3==0?'lightblue':(i%3==1?'lightyellow':'lightpink')    }}changeColor()


//代码写法七
for(var i=0;i<ulList.length;i+=3){      
    var max=ulList.length-1    
    //每一组循环一次，在循环体中，把当前这一组的样式设置即可（可能出现当前这一组不够三个，这样会报错）  
    ulList[i].style.background='lightblue';      
    i+1<=max?ulList[i+1].style.background='lightpink':null;     
    i+2<=max?ulList[i+2].style.background='lightyellow':null;
}

关于Bug

代码七的错误：因为次方法是一组一组遍历，但当ulList的数量不再是3、6、9...那么剩下的li便无法找到，因此会报错。需要再加个判断，当i+1,i+2的最大值大于max时，让她的样式为null，这样子就不会报错啦~

CSS代码

把每一次“好难”，“很累”，“我不行”

换成“再坚持一下试试”

结局是不是会好一点