js - for循环语句

Posted zyuu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js - for循环语句相关的知识,希望对你有一定的参考价值。

    这个语句可以说相当方便了,特别是数据庞大的循环简直是神器!但难点在于理解边界在哪里。

    先来说说 for 循环的语法吧;

    

    for(初始条件;条件判断;条件变化){
    // 循环的代码
    }

    执行顺序:
    1. 先初始条件
    2. 开始条件判断
    3. 如果成立,执行要循环的代码块
    4. 条件变化
    2,3,4,2,3,4....
    直到条件判断不成立,整个循环结束

    注意:
    条件判断一直为true,循环会一直执行下去,称之为死循环

    for循环中一定要写两个分号

 

    对于执行顺序,那是一定要认清的,否则循环的次数就可能跟预想的有出入,  还要注意的是最好不要让电脑陷入死循环,除非你是勇士,浏览器会卡死,分分钟挂掉,所以说,作为一个正经程序员要善待浏览器这个好朋友哇!!!

    还记得99乘法表吗 ?是的,我们用for循环做了一个,部分代码如下:

<script>
			var box = document.getElementById(‘box‘);
			//自定义一个变量str,初始为空字符
			var str =‘‘;
			//使用for循环确定总共有9列,即生成九个div.
			// i 为列数 , j 为行数
			for(var i = 1 ; i < 10 ; i++ ){
				//将str拼合起来
				str +=‘<div>‘;
				//每一列列数不变, 行数从 i 开始循环一直到 9
				for(var j = i ;j < 10 ;j++){
					var n = i + ‘x‘ +j + ‘=‘ +i*j
					str += ‘<span>‘+n+‘</span>‘
				}
				str += ‘</div>‘
			}
			box.innerhtml = str;
		</script>

  如果用  html+css 也能做出来,但 js 相对来说写的字符就少一些,否则81个小方块再填不同的算式,那得整到猴年马月啊。

 

    单单使用 for 循环难免太乏味,所以我做了一个 if  +  for 的小东东 ,一个 V 形小方盒,最有特色的地方就是找规律,定位每个小盒子left,top值,一起来看:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.box{
			position:relative;
			width: 300px;
			height: 300px;
			border:1px solid #000000;
			margin:0 auto;
		}
		.box div{
			position:absolute;
			width:60px;
			height: 60px;
			background-color: mediumpurple;
			color:#fff;
		}
	</style>
	<body>
		<!--生成一个容器放置V形变换的 div -->
		<div class="box">
			<!--<div style="‘left:‘+i*60‘px‘;‘top:‘+(2-i)*60+‘px‘">1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>-->
		</div>
		
		<script>
			//声明变量
			var box = document.getElementsByClassName(‘box‘) 
			//自定义空标签(用来拼接内嵌div)
			var str = ‘‘
			//进入 for 循环,生成5个 div
			for(var i = 0 ; i< 5; i++){
				//判断i的大小,left 值从 0 以每个 div 的宽度递增
				if(i <= 2){
					//当 i <= 2 时,top值从 0  的高度以每个 div 高度递增至 2 个 div
					str +=‘<div style="left:‘+i*60+‘px;top:‘+i*60+‘px">‘+i+‘</div>‘
				}else{
					//当 i > 2 时,top值从 2 个 div 的高度以每个 div 高度递减至 0
					str +=‘<div style="left:‘+i*60+‘px;top:‘+(4-i)*60+‘px">‘+i+‘</div>‘
				}
			}
			//把 str 值赋给 box 里边的div
			box[0].innerHTML = str
		</script>
	</body>
</html>

  现在已经意识到原来数学找规律真不是白学的,虽然买菜用不上微积分,用不上找规律,但在使用计算机时,数学真的是太重要了,嗯~要重新重视起来了,。










以上是关于js - for循环语句的主要内容,如果未能解决你的问题,请参考以下文章

前端—— JavaScript基础操作:if语句for循环while循环for...infor...of异常处理函数事件JS选择器JS操作页面样式

JavaScript基础 if 循环 for 循环

JS中for...in 语句用于对数组或者对象的属性进行循环操作吗?

js的关于for的语句

js中的4种循环结构

在js中怎么结束当前for循环?