JavaScript基础知识——练习巩固（2）

再快一步`

于 2023-10-16 12:44:39 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48719464/article/details/133855798

版权

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

写一个程序，要求如下

需求1：让用户输入五个有效年龄（0-100之间），放入数组中

必须输入五个有效年龄年龄，如果是无效年龄，则不能放入数组中

需求2：打印出所有成年人的年龄 (数组筛选)

需求3：打印出所有人总年龄（累加）

需求4：打印出所有人的平均年龄（累加）

需求5：打印出最大年龄和最小年龄（最大值）

    <script>
        1.声明累加数组
        let arr = []
        while (arr.length < 5){
            let num = +prompt(`请输入第${arr.length + 1}个人有效年龄`)
        // 判断是否有效
        if( num > 0 && num < 100){
            // 添加到数组
            arr.push(num)
            }
        }
        console.log(arr);
        // 2. 打印输出人的的年龄  年龄 > 18
        for(let i = 0; i <= arr.length; i++){
            if(arr[i] > 18){
                document.write(`已经成人的年龄是：${arr[i]} <br>`)
            }
        }
        // 3.打印出所有人的总年龄（累加）
        let ageSum = 0
        for(let i = 0; i <= arr.lenht; i++){
            ageSum += arr[i]
        }
        document.write(`所有人的年龄是：${ageSum} <br>`)

        // 4.打印出所有人的平均年龄（累加）
        let average = 0
        average = ageSum / arr.length
        document.write(`所有人的平均年龄是：${average} <br>`)

        5.打印出最大年龄和最小年龄（最大值） 假设法
        let max = arr[0]
        let min = arr[0]
        for(let i = 1; i < arr.length; i++){
            if(max < arr[i]){
                max = arr[i]
            }
            if(min > arr[i]){
                min = arr[i]
            }
        }
        document.write(`最大值是：${max} <br>`)
        document.write(`最小值是：${min} <br>`)

        5.打印出最大年龄和最小年龄（最大值） 排序法
        arr.sort(function (a,b){
            return a - b;
        }) // 升序
        let min = arr[0] 
        let max = arr[arr.length - 1] 
    </script>

找出数组中元素为10的下标，有则打印该下标，没有则打印-1

例如: [88,20,10,100,50] 打印 2

例如: [88,20,30,100,50] 打印-1

<script>
    // 找出数组中 元素为10的下标，有则打印该下标，没有则打印 - 1
    let arr = [88, 20, 10, 100, 50]
    let re = -1  // 用于存储结果,默认没有
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === 10) {
            re = i  //如果找到则把当前索引号赋值给 re， 如果没有找到，则默认的是 -1
            break // 已经找到就退出
        }
    }
    console.log(re)
</script>

使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]

<script>
     // 遇到数组 先把遍历写出来!!!!!!!!!!!!!!!=> 访问数组里面的单元的值

    let arr = [5, 8, 9, 2, 1, 5]
    let sum = 0
    for (let i = 0; i < arr.length; i ++) {
        // sum = sum + item
        sum += item
    }
    console.log(sum) // 30
</script>

使用for循环 - 求出数组里大于5的i和 [4, 9, 5, 20, 3, 11]

<script>
    let arr =   [4, 9, 5, 20, 3, 11]
    for (let i= 0; i < arr.length; i++) {
        if (arr[i] > 5) {
            sum += arr[i]
        }
    }
    console.log(sum) 

</script>

使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]

    <script>
        //5.使用for循环-求出班级里同学们平均年龄[15,19,21,33,18,24]
        let arr = [15,19,21,33,18,24]
        let ave = 0
        for(let i = 0; i < arr.length; i++){
            ave += arr[i]
        }
        let aver = ave / arr.length
        document.write(aver)
    </script>

计算[2, 6, 18, 15, 40] 中能被3整除的偶数的和

    <script>
        // 6.计算[2,6,18,15,40]中能被3整除的偶数的和
        let arr = [2,6,18,15,40]
        let counts = 0
        for(let i = 0; i < arr.length; i++){
            if( arr[i] % 3 === 0  && arr[i] % 2 === 0){
                counts += arr[i]
            }
        }
        document.write(counts)
    </script>

计算[2, 6, 18, 15, 40] 中能被3整除的偶数的个数

    <script>
        // 7.计算[2,6,18,15,40]中能被3整除的偶数的个数
        let arr2 = [2,6,18,15,40]
        let counts1 = 0
        for(let i = 0; i < arr2.length; i++){
            if( arr2[i] % 3 === 0  && arr2[i] % 2 === 0){
                counts1++
            }
        }
        document.write(counts1)
    </script>

给一个数字数组，该数组中有很多数字0，将不为0的数据存入到一个新的数组中

    <script>
        // 8.给一个数字数组，该数组中有很多数字0，将不为0的数据存入到一个新的数组中
        let arr3 = [0,2,3,0,3,0,3,0,5,0]
        let arr4 = []
        for(let i = 0; i < arr3.length; i++){
            if(arr3[i] !== 0){
                arr4.push(arr3[i])
            }
        }
        document.write(arr4)
    </script>

根据用户输入的个数，页面可以渲染对应王者荣耀永雄的个数

思路分析：

渲染图片比较多，我们可以把图片地址放入数组中，

图片名称是有序号排列的，比如1.webp 2.webp 此处可以使用循环方式重复渲染图片

渲染位置？可以考虑放到 box盒子里写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>渲染图片案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .box {
      display: flex;
      flex-wrap: wrap;
      width: 540px;
      margin: 20px auto;
    }



    .box li {
      width: 100px;
      height: 100px;
      margin: 0 10px 10px 0;
    }

    .box li:nth-child(5n+1) {
      margin-right: 0;
    }

    .box li img {
      width: 100%;
      height: 100%;
      border: 2px solid #258DF2;
      border-radius: 10px 0 10px 0;
    }
  </style>
</head>

<body>
  <ul class="box">
    <script>
      let arr = [
        './images/1.webp',
        './images/2.webp',
        './images/3.webp',
        './images/4.webp',
        './images/5.webp',
        './images/6.webp',
        './images/7.webp',
        './images/8.webp',
        './images/9.webp',
        './images/10.webp',
        './images/11.webp',
        './images/12.webp',
        './images/13.webp',
        './images/14.webp',
        './images/15.webp',
        './images/16.webp',
        './images/17.webp',
        './images/18.webp',
        './images/19.webp',
        './images/20.webp'
      ]
      let num = prompt('请输入显示的英雄个数1~20之间：')
      for (let i = 0; i < num; i++) {
        document.write(`
          <li>
            <img src="${arr[i]}" alt="">
          </li>
        `)
      }
    </script>
  </ul>
</body>

</html>