这个语句可以说相当方便了,特别是数据庞大的循环简直是神器!但难点在于理解边界在哪里。
先来说说 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>
现在已经意识到原来数学找规律真不是白学的,虽然买菜用不上微积分,用不上找规律,但在使用计算机时,数学真的是太重要了,嗯~要重新重视起来了,。