JavaScript for循环控制语句

合集 - web前端(29)

1.1-web前端 基础标签 、图片、超链接2023-09-192.2-web前端 音频、视频、表格、表单2023-09-193.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动2023-09-194.5-web前端 定位position2023-09-195.6-web前端的特效 平面转换transfrom2023-09-196.7-web前端 空间转换，3D效果2023-09-197.8-web前端 动画 案例2023-09-198.9-web前端 flex弹性布局2023-09-199.10-JavaScript 点击事件 随机点名器2023-09-2010.11-JavaScript 逻辑条件 ，if判断 ，while循环，算数运算相关的案例演示2023-09-2311.12-web前端轮播图案例 （小米商城）2023-09-2712.css字体样式2023-10-0813.css样式对单行和多行文本的隐藏2023-10-1014.css伪类和伪元素2023-10-1215.web前端html+css页面内容的六种隐藏方式2023-10-1616.JavaScript的基础语法和数据类型2023-10-2617.JavaScript 数组Array存储方式及对象Object2023-10-2718.JavaScript数据类型的转换2023-10-3019.JavaScript运算符及优先级2023-10-3120.JavaScript条件判断if 语句2023-11-01

21.JavaScript for循环控制语句2023-11-02

22.JavaScript 其他循环语句和跳转语句2023-11-0323.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析2023-11-0424.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例2023-11-0425.JavaScript Array对象（属性、方法） 留言板案例2023-11-0426.JavaScript string对象（属性，方法）获取图片后缀案例 输入和输出结果转换形式案例2023-11-0727.JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历2023-11-1328.JavaScript事件 2023-11-1829.JavaScript BOM对象2023-11-18

收起

1、什么是for循环

在JavaScript中，for循环是一种常用的控制流语句，用于重复执行一段代码指定的次数。

for (循环变量初始化表达式; 循环条件表达式; 更新循环变量表达式) {
    循环体
}

• 初始化表达式：只在循环开始时执行一次，通常用于初始化循环控制变量。
• 条件表达式：每次循环开始前都会被评估。如果条件为真（true），则执行循环体；否则，循环终止。
• 最终表达式：在每次循环结束时执行，通常用于更新循环控制变量。

2、注意

1. 循环变量可以定义在for 循环结构体外

2. 没有更新循环变量会变成死循环

3. 循环条件中的‘；’不能省略

3、基础for循环案例

循环五个div标签

for(var i=0;i<5;i++){
  document.write('<div>1</div>')
}

循环输出1-100

var sum = 0;
        for(var i = 0 ;i<=100;i++){
            sum+=i
            if(i<100){
                document.write(i+'+')
            }else{
                document.write(i+'='+sum)
            }
        }
console.log(sum);

4、特殊案例

算数乘法表

.red{
            width: 100px;
            height: 30px;
            background-color: red;
            display: inline-block;
            margin: 5px;
            color: #fff;
            text-align: center;
            line-height: 30px;
        }

for(var l = 1;l<=9;l++){
            for(var r = 1;r<=l;r++){
                var num1= r;
                var num2 = l;
                var sum = num1 *num2
                document.write('<div class="red">'+num1+'*'+num2+'='+sum +'</div>')
            }
            document.write('<br>')
 }

方块菱形

for(var l = 1;l<=5; l++){
            for(var gr =1;gr<=5-l;gr++){
                document.write('<div class="fff"></div>')
            }
            for(var r =1;r<=2*l-1;r++){
                document.write('<div class="blue"></div>')
            }
            document.write('<br>')
        }
        for(var xl = 1;xl<=4;xl++){
            for(var xxr =1;xxr<=xl;xxr++){
                document.write('<div class="fff"></div>')
            }
            for(var xr = 1;xr<=9-xl*2;xr++){
                document.write('<div class="blue"></div>')
            }
            document.write('<br>')
}