JavaScript学习笔记——for循环

循环可以将代码块执行指定的次数。for 循环是在创建循环时常会用到的工具。

for 循环的语法：

for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

实例1：为多个元素添加点击事件：

var oUl=document.getElementById('list');//这里命名规则是：oUl是指objectUl，aLi指arrayLi
var aLi=document.getElementsByTagName('li');
		
var arr=['今天','明天','后天'];

//添加点击事件
for(var i=0;i<aLi.length;i++){
	aLi[i].innerHTML=arr[i];
	aLi[i].onclick=function(){
		alert(i);//此时不管点击哪个li，提示都是3
		};
	}

实例2：添加100个按钮：

//写法1：性能有问题，它每次都要去body里面找，然后再把代码塞进去，很慢
for(var i=0;i<1000;i++){
	document.body.innerHTML+='<input type="button" value="按钮"/>';
	}

效果如下图：

但是，写法1会严重影响性能。如果我们把循环次数改成1000，需要很久才能把页面加载完成。因为它每次都要去body里面找，然后再把代码塞进去。因此，使用写法2：该加的东西继续放，但是不要和直接处理页面。

//写法2：该加的东西继续放，但是不要和直接处理页面
var str='';
for(var i=0;i<1000;i++){
	str+='<input type="button" value="按钮"/>';
	}
	document.body.innerHTML=str;

实例3：for循环计算元素坐标

var aDiv=document.getElementsByTagName('div');
//添加100个div元素
for(var i=0;i<100;i++){
	document.body.innerHTML+='<div>'+i+'</div>';
	
	}
//设置每个div元素距离页面左边的距离
for(var i=0;i<aDiv.length;i++){
	aDiv[i].style.left=i*60+'px';
	
	}
//每逢10个元素往下走一行
for(var i=0;i<aDiv.length;i++){
	if(i>10){
		aDiv[i].style.top=Math.floor(i/10)*50+'px';//Math.floor()方法可对一个数进行下舍入。
		}
	
	}

实现效果：

实例4：双重for循环查找元素

var oUl=document.getElementById('list');
//找到每个一级列表
var aUl=oUl.getElementsByTagName('ul');
var aLi=null;

for(var i=0;i<aUl.length;i++){
	//找到每个一级列表下面的所有二级元素
	aLi=aUl[i].getElementsByTagName('li');
	//给每个元素添加边
	for(var j=0;j<aLi.length;j++){
		aLi[j].style.border='1px red solid';
		}
	}

实现效果：

实例5：for循环自动生成一组新闻

var oUl=document.getElementById('list');
var oBtn=document.getElementById('btn1');

var arr=['划重点 重温习近平8-19讲话精髓',
'习近平：大爱无疆 医者仁心',
'习近平时间：幸福靠奋斗 兴邦靠实干 大江奔流',
'金一南少将：美国也知台湾牌危险 为啥还一直玩火',
'马哈蒂尔访华第一天都干了啥 传达出这些重磅信号'];

oBtn.onclick=function(){
	oBtn.disabled=true;//使按钮不再可点
	
	
	//一次生成五条新闻
	for(var i=0;i<5;i++){
		var li=document.createElement('li');
		li.innerHTML=arr[i];
		oUl.appendChild(li);
		}
	}

源代码：

实例5：for循环自动生成一组新闻

JavaScript学习笔记——for循环

猜你喜欢