美文网首页
遍历一个数组,插入页面,且隔行显示不同效果(innerHTML)

遍历一个数组,插入页面,且隔行显示不同效果(innerHTML)

作者: Antus | 来源:发表于2019-08-04 16:07 被阅读0次

源码:

<!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++),此举会重复计算数组长度,数据大时,可能会影响浏览器处理及显示效果;

相关文章

网友评论

      本文标题:遍历一个数组,插入页面,且隔行显示不同效果(innerHTML)

      本文链接:https://www.haomeiwen.com/subject/ahubcctx.html