循环语句1

最新推荐文章于 2024-09-11 11:28:25 发布

h54211

最新推荐文章于 2024-09-11 11:28:25 发布

阅读量75

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/h54211/article/details/128104947

版权

循环语句：

作用：做重复的事请

1、for循环

语法：

for(初始化变量;循环的条件;更新变量) {

执行的代码

}

<script>
for(var i = 1;i<=100;i++) {
            if(i % 5 == 0) {
                console.log(i);
            }
        }

    </script>

数组: 存多个，多种数据类型

var arr = [11,10,8,'hello',true,false,null,undefined,[1,2,3],12,14]

拿数组的每一项

// console.log(arr[0]);

// console.log(arr[1]);

// console.log(arr[2]);

// console.log(arr[3]);

数组的长度

// console.log(arr.length);

二维数组：数组里面还套一个数组

// 拿[1,2,3]里面的数字2

console.log(arr[8][1]);

 <script>
        var arr = [11,10,8,'hello',true,false,null,undefined,[1,2,3],12,14]

        // 拿数组的每一项
        // console.log(arr[0]);
        // console.log(arr[1]);
        // console.log(arr[2]);
        // console.log(arr[3]);

        // 数组的长度
        // console.log(arr.length);

        // 二维数组： 数组里面还套一个数组
        // 拿[1,2,3]里面的数字2
        console.log(arr[8][1]);

        for(var i = 0;i<arr.length;i++) {
            console.log(arr[i]);
        }
    </script>

for循环标签

<body>
    <button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><button>按钮6</button><button>按钮7</button><button>按钮8</button><button>按钮9</button><button>按钮10</button>

    <script>
        var button = document.getElementsByTagName('button');

        // button[0].onclick = function() {
        //     alert('我被点击了')
        // }
        // button[1].onclick = function() {
        //     alert('我被点击了')
        // }

        for(var i=0;i<button.length;i++) {
            button[i].onclick = function() {
                alert('我被点击了')
            }
        }
    </script>
</body>

for循环生成标签

<body>
    <div class="wrap"></div>

    <script>
        var wrap = document.getElementsByClassName('wrap')[0]
        var arr = ['1','2','3','4','5','哈哈哈','嘻嘻嘻']
        for(var i = 0;i<arr.length;i++) {
            // console.log(arr[i]);
            // console.log('<p>'+arr[i]+'</p>');
            wrap.innerHTML += '<p>'+arr[i]+'</p>'
        }
    </script>
</body>

for循环嵌套（双重for循环）

   <script>
        // 外层循环控制显示几行，里面的循环控制显示几列
        // for(var i = 1;i<5;i++) {
        //     for(var j=1;j<5;j++) {
        //         document.write('*');
        //     }
        //     document.write('<br/>')
        // }

        // 执行过程
        // i = 1    j= 1,2,3,4  
        //i = 2     j=1，2，3，4
        //i = 3     j=1，2，3，4
        //i = 4     j=1，2，3，4

        for(var i = 1;i<5;i++) {
            for(var j=1;j<=i;j++) {
                document.write('*');
            }
            document.write('<br/>')
        }
          // 执行过程
        // i = 1    j= 1  
        //i = 2     j= 1，2
        //i = 3     j= 1，2，3
        //i = 4     j= 1，2，3，4
    </script>

九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            margin-bottom: 10px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!-- 
        执行思路

        // i = 1    j= 1      
        //i = 2     j= 1，2
        //i = 3     j= 1，2，3
        //i = 4     j= 1，2，3，4
        //i = 5     j= 1，2，3，4，5
        //i = 6     j= 1，2，3，4，5，6
        //i = 7     j= 1，2，3，4，5，6，7
        //i = 8     j= 1，2，3，4，5，6，7，8
        //i = 9     j= 1，2，3，4，5，6，7，8，9
     -->
    <script>
        for(var i = 1;i<=9;i++) {
            for(j = 1;j<=i;j++) {
                document.write('<span>'+i+'*'+j+'='+i*j+'</span>' )
            }
            document.write('<br>')
        }
    </script>
</body>
</html>

while循环

while 当...的时候

语法：

while(条件) {

条件成立执行这段代码

}

<script>
        var a = 1;   //初始化变量
        while(a<=100) {
            console.log(a);  // 循环的代码
            a++  // 更新变量
        }
    </script>

do-while循环

do..while循环

语法：

do {

循环体

}while(条件)

 <script>
        // var a = 1
        // do {
        //     console.log(a);
        //     a++
        // }while(a<=100)

        // while和do..while的区别
            // while是先判断在执行循环体，如果不符合不会执行
            // do..while会先执行一次再进行判断，所以如果第一次就不满足条件的话会被执行一次的

        var a = 0

        // while(a<0) {
        //     console.log('我被打印了');
        //     a++
        // }

        do {
            console.log('我被打印了');
            a++
        }while(a<0)

     </script>

break和continue

<script>
        // 打印1-5这几个数字
        for(var i = 1;i<=5;i++) {
           
            if(i==3) {
                // break;  //跳出循环
                continue;  //结束本次循环
            }
            console.log(i);
        }
    </script>