遍历一个数组，插入页面，且隔行显示不同效果（innerHTML）
2019-08-04 本文已影响0人
Antus
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简书</title>
</head>
<body>
<p>点击按钮列出数组的每个元素。</p>
<button onclick="myFunction()" id="but">点我</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25, 4, 9, 16, 25, 4, 9, 16, 25, 4, 9, 16, 25];
var numleg = numbers.length;
function myFunction()
{
var i;
for(i=0; i< numleg; i++)
{
demoP.innerHTML= demoP.innerHTML+"<div id=" +i+">numbers["+i+"]= " +numbers[i]+"</div><br>";
if(i%2==1)
{
document.getElementById(i).style.color="red";
}
}
}
</script>
</body>
</html>
显示效果：
备注：
1、函数中尽量不使用全局变量；
2、在遍历数组、列表等，尽量不要在循环中计算数组长度，如（var i=0;i<numbers.length;i++）,此举会重复计算数组长度，数据大时，可能会影响浏览器处理及显示效果；
