方法三的实现方式过于复杂,其实没必要,偶的更方便简洁的实现方式,再次献上:
方法一:
效果图:
代码展示:
四个数据为一组,用2区分前半组和后半组(适用从0开始)
for(let i = 0; i < liList.length; i++){
if ((i % 4) < 2) {
liList[i].style.background = "yellow"
} else {
liList[i].style.background = "pink"
}
}
方法二:
设置循环步长为4,去分别设置颜色,前两个一种,后两个一种
for(var i = 0; i < liList.length; i+=4) {
liList[i].style.background = 'red'
liList[i+1].style.background = 'red'
liList[i+2].style.background = 'blue'
liList[i+3].style.background = 'blue'
}
方法三:
效果图:
逻辑: 考的其实是数学找规律,规律找到了代码即可实现
1+2=3,
3+4=7,
5+6=11,
7+8=15,
3,7,11,15,找规律:3+(n-1)*4
所以 3+(5-1)*4=19 19=9+10
规律找到,再找如何从3+(1-1)*4 = 3中找到2和1
规律为:((3+(1-1)*4)-1)/2=1 1+1=2由此可得为1与2
举例:第6次双行显示统一颜色的是哪两行
3+(6-1)*4 = 23
(23-1)/2=11
11+1=12
由此可得,下两行应该是第11和12行同色
代码展示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
<title>双行显示不同的颜色</title>
<!--下面为javascript代码-->
<script type = "text/javascript">
window.onload = function color(){//窗口加载时调用
var table = document.getElementById("person");//根据table的 id 属性值获得对象
var rows = table.getElementsByTagName("tr");//获取table类型的tr元素的列表
for(var i = 1; i <= rows.length; i++){
let shu = 3+(i-1)*4
let res = (shu-1)/2
if(i % 2 == 0){
rows[res].style.backgroundColor = "#EAF2D3";//偶数行时背景色为#EAF2D3
rows[res+1].style.backgroundColor = "#EAF2D3";//偶数行时背景色为#EAF2D3
}else{
rows[res].style.backgroundColor = "White";//单数行时背景色为white
rows[res+1].style.backgroundColor = "White";//单数行时背景色为white
}
}
}
</script>
<!--下面为css代码-->
<style type = "text/css">
#person
{
border-style:1px solid;
border-color:blue;
font-weight:bold;
font-family:楷体,Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin:auto;
}
#person th
{
border:1px solid;
padding:3px 7px 2px 7px;
background-color:#A7C942;
color:#ffffff;
text-align:center;
}
#person td
{
border-style:solid;
border-width:1px;
text-align:center;
}
</style>
</head>
<body>
<table id = "person" align = "center" width = "90%" height = "200">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>33333333</td>
<td>睡觉</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>44444444</td>
<td>旅游</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>55555555</td>
<td>购物</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>66666666</td>
<td>看书</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>55555555</td>
<td>购物</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>66666666</td>
<td>看书</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>33333333</td>
<td>睡觉</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>44444444</td>
<td>旅游</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>33333333</td>
<td>睡觉</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>44444444</td>
<td>旅游</td>
</tr>
<tr>
<td>王五</td>
<td>女</td>
<td>55555555</td>
<td>购物</td>
</tr>
</table>
</body>
</html>