J10 隔行变色展示效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
      <title>隔行变色</title>
</head>
<body>
    <div class="box" id="box" style="width:600px;">
        <h3 style="text:center;">我是标题</h3>
        <ul>
            <li>JS</li>
            <li>JQ</li>
            <li>VUE</li>
            <li>NODE</li>
        </ul>     
    </div>
    <script>
let box=document.getElementById("box");
let navList=box.getElementsByTagName("li");

// //=>方案一.i对应的正好是索引
// for(var i=0;i<navList.length;i++){
//     if(i%2!==0){
//       navList[i].style.color="red";
//     }else{
//          navList[i].style.color="green";
//     }
// }

// //方案二.三元运算符写法
// for(var i=0;i<navList.length;i++){
//     navList[i].style.color = i % 2 !== 0 ? 'green' : 'red';
//     }

//=>方案三.i对应的是索引，+1正好是1 对应i的值
for(var i=0;i<navList.length;i++){
    if((i+1)%2!==0){
      navList[i].style.color="red";
    }else{
         navList[i].style.color="green";
    }
}
    
//分析
/*
* 第一行 奇数行  => 索引0  索引偶数
* 第二行 偶数行  => 索引1  索引奇数
* 第三行 奇数行  => 索引2  索引偶数
* ....
* 当前行的索引是奇数代表偶数行，当前行的索引是偶数，代表的是奇数行
* 
* x % 2 === 0 能被2整除的是偶数
*/
</script>
</body>
</html>
展示效果