JavaScript循环：while\for

1.使用while同时对10个div加上背景颜色

主要代码：

            var x = document.getElementsByTagName('div');
            var i = 0;
            while(i<10){
                x[i].style.backgroundColor = "red";
                i = i+1;
            }

注意：长度不要写死，用 i<x.length 更合适

<!DOCTYPE html>
<html>
<head>
	<title>example</title>
<style>
	#div1{
		float: left;
		margin-right: 10px;
		width: 200px;
		height: 200px;
		border: 2px solid black;
	}
</style>
<script>
	window.onload = function (){
		var oBtn = document.getElementById('btn1');
		oBtn.value = '变色';
		oBtn.onclick = 	function (){
			var x = document.getElementsByTagName('div');
			var i = 0;
			while(i<10){
				x[i].style.backgroundColor = "red";
				i = i+1;
			}
		};

	}
</script>
</head>
<body>
	<input id="btn1" type="button" value="变红">

	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
</body>
</html>

2.使用for同时对10个div加上背景颜色

主要代码：

            var x = document.getElementsByTagName('div');
            for(var i = 0;i<10;i++){
                x[i].style.backgroundColor = "red";
            }

<!DOCTYPE html>
<html>
<head>
	<title>example</title>
<style>
	#div1{
		float: left;
		margin-right: 10px;
		width: 200px;
		height: 200px;
		border: 2px solid black;
	}
</style>
<script>
	window.onload = function (){
		var oBtn = document.getElementById('btn1');
		oBtn.value = '变色';
		oBtn.onclick = 	function (){
			var x = document.getElementsByTagName('div');
			for(var i = 0;i<10;i++){
				x[i].style.backgroundColor = "red";
			}
		};

	}
</script>
</head>
<body>
	<input id="btn1" type="button" value="变红">

	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
	<div id="div1" ></div>
</body>
</html>

 

posted @ 2020-02-05 23:31  昨夜昙花  阅读(5)  评论(0)    收藏  举报