第三章 web前端开发工程师--JavaScript进阶程序设计 3-5 javascript For 循环的应用
程序员文章站
2022-03-09 08:05:48
...
JavaScript For 循环的使用
本节课所讲的内容：
1. For 循环的使用
2. for 循环的嵌套
一、For 循环的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>for 循环的应用</title>
<style>
div{
width: 50px;
height: 50px;
border: 1px solid red;
position: absolute;
}
</style>
</head>
<body>
<script>
var aDiv = document.getElementsByTagName('div');
for(var i=0;i<21;i++){
document.body.innerHTML +='<div>'+i+'</div>';
}
for(var i=0;i<aDiv.length;i++){
aDiv[i].style.left = 10+i*50+'px';
aDiv[i].style.top = 10+i*50+'px';
}
//此时看不出来效果，只有定位才能成功
</script>
</body>
</html>
二、For 循环的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>For 循环嵌套</title>
</head>
<body>
<ul id="list">
<li>
<h2>我的课程</h2>
<ul>
<li>web前端</li>
<li>PHP后台</li>
<li>Linux</li>
</ul>
</li>
<li>
<h2>我的联系方式</h2>
<ul>
<li>1111111</li>
<li>aaa@qq.com</li>
<li>北京</li>
</ul>
</li>
</ul>
<script>
window.onload = function(){
//示例一：
var oUL = document.getElementById('list');
var aUL = oUL.getElementsByTagName('ul');
var len = aUL.length;
for(var i=0;i<len;i++){
aLi = aUL[i].getElementsByTagName('li');
for(var j=0;j<aLi.length;j++){
aLi[j].style.color='red';
}
}
//示例二：
var arr = [[1,2,3,4],[1,2,3],[1,2]];
for(var i=0; i<arr.length; i++){
//alert(arr[i]);
for(var j=0; j<arr[i].length; j++){
alert(arr[i][j]);
}
}
}
</script>
</body>
</html>上一篇： 哲学家就餐问题之java解决
下一篇： C语言程序设计第三章