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