for循环实例练习

奶粉罐没粉

已于 2022-08-26 18:04:16 修改

阅读量2.5k

点赞数 2

文章标签： javascript 开发语言

于 2022-08-26 16:33:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_62089165/article/details/126451876

版权

本文通过实例详细讲解了JavaScript中的for循环用法，包括打印、求和、遍历数组、冒泡排序等常见操作，并介绍了如何根据用户输入生成柱形图的综合案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、for循环实例练习

1.打印十遍我爱优快云

for (let i = 1; i <= 10; i++){
        document.write(`我爱优快云`)
    }

2.利用for循环输出1~100岁

for (let i = 1; i <= 100; i++){
        document.write(`${i}岁<br>`)
    }

3.求1-100之间所有的偶数和

    let sum = 0
    for (let i = 1; i <= 100; i++){
       if (i % 2 === 0){
        sum += i
       }
    }
    document.write(sum)

4.页面中打印5个小星星★★★★★

    for(let i = 1; i <= 5; i++){
        document.write(`★`)
    }

5.打印以下图形

    for(let i = 1; i <= 3; i++){
        document.write(`第${i}天<br>`)
        for(let j = 1; j <= 5; j++){
            document.write(`记住第${j}个单词<br>`)
        }
        
    }

6.打印以下5行5列小星星

 for(let i = 1; i <= 5; i++){
        for(let j = 1; j <= 5; j++){
            document.write(`★`)
        }
        document.write(`<br>`)
    }

7.用户输入n行m列自动打印输出小星星

    let num1 = prompt('请输入行数：')
    let num2 = prompt('请输入列数：')
    for(let i = 1; i <= num1; i++){
        for(let j = 1; j <= num2; j++){
            document.write(`★`)
        }
        document.write(`<br>`)
    }

8.打印倒三角星星

for(let i = 1; i <= 5; i++){
        for(let j = 1; j <= i; j++){
            document.write(`★`)
        }
        document.write(`<br>`)
    }

9.九九乘法表

<!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>
        div {
            display: inline-block;
            height: 25px;
            width: 100px;
            line-height: 25px;
            margin: 5px;
            background-color: pink;
            padding: 0 10px;
            border: 1px solid hotpink;
            color: deeppink;
            border-radius: 5px;
            box-shadow:  2px 2px 2px rgba(0, 0, 0, 0.2);
            text-align: center;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <script>
        for(let i = 1; i <= 9; i++){
            for(let j = 1; j <= i; j++){
            document.write(`
            
            <div>${j} × ${i} = ${j * i}</div>
            
            `)
        }
        document.write(`<br>`)
    }
    </script>
</body>
</html>

二、数组实例

1.遍历数组['马超','赵云','张飞','关羽','黄忠']

let arr = ['马超','赵云','张飞','关羽','黄忠']
for (let i = 0; i < arr.length ; i++){
    document.write(`你所选的英雄是：${arr[i]}<br>`)
}

2.求数组 [2,6,1,7,4] 里面所有元素的和以及平均值

    let arr =[2,6,1,7,4]
    let sum = 0
    let average = 0
    for (let i = 0; i < arr.length; i++){
        sum += arr[i] 
    }
    average = sum / arr.length
    document.write(`本数组所有元素的和是${sum},其平均值是${average}`)

3.求数组 [2,6,1,77,52,25,7] 中的最大值

    let arr = [2,6,1,77,52,25,7]
    let max = arr[0]
    for (let i = 1; i <= arr.length; i++){
        if (max < arr[i]){
            max = arr[i]
        }
    }
    document.write(max)

4.将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 
    let Newarr = []
    for (let i = 0;i < arr.length; i++){
        if (arr[i] >= 10){
            Newarr.push(arr[i])}
    }
    document.write(Newarr)

5.将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组

    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let Newarr = []
    for (let i = 0;i < arr.length; i++){
        if (arr[i] != 0){
            Newarr.push(arr[i])}
    }
    document.write(Newarr)

6.对数组[2,3,1,4,5]进行冒泡排序

    let arr = [2,3,1,4,5]
    for (let i = 0;i <= arr.length-1; i++){
        for (let j = 0;j <= arr.length-i-1;j++){
            if(arr[j] > arr[j+1]){
            let temp = arr[j]
            arr[j] = arr[j+1]
            arr[j+1] = temp 
        }
        }
    }
    document.write(arr)

三、综合案例

需求：用户输入四个季度的数据，可以生成柱形图

分析：

①：需要输入4次，所以可以把4个数据放到一个数组里面

 利用循环，弹出4次框，同时存到数组里面

②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中

 柱形图就是div盒子，设置宽度固定，高度是用户输入的数据

 div里面包含显示的数字和第n季度

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            flex-direction: column;
            justify-content: space-between;
        }

        .box div span {

            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>

<body>
    <!-- 
        <div style="height: 123px;">
            <span>123</span>
            <h4>第1季度</h4>
        </div>
        <div style="height: 156px;">
            <span>156</span>
            <h4>第2季度</h4>
        </div>
        <div style="height: 120px;">
            <span>120</span>
            <h4>第3季度</h4>
        </div>
        <div style="height: 210px;">
            <span>210</span>
            <h4>第4季度</h4>
        </div>

     -->
    <script>
        let arr = []
        for (let i = 1; i <= 4; i++){
            arr.push(prompt(`请输入第${i}季度的数据`))
        }  
        document.write(`<div class="box">`)
        for (let i = 0; i < arr.length; i++){
            document.write(`
                <div style="height: ${arr[i]}px;">
                    <span>${arr[i]}</span>
                    <h4>第${ i + 1 }季度</h4>
                </div>
            `)
        }    
        document.write(`</div>`)
    </script>
</body>

</html>