当前位置: 首页 > news >正文

JavaScript基础知识——练习巩固(2)

写一个程序,要求如下

  • 需求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. 打印输出人的的年龄  年龄 > 18for(let i = 0; i <= arr.length; i++){if(arr[i] > 18){document.write(`已经成人的年龄是:${arr[i]} <br>`)}}// 3.打印出所有人的总年龄(累加)let ageSum = 0for(let i = 0; i <= arr.lenht; i++){ageSum += arr[i]}document.write(`所有人的年龄是:${ageSum} <br>`)// 4.打印出所有人的平均年龄(累加)let average = 0average = ageSum / arr.lengthdocument.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的下标,有则打印该下标,没有则打印 - 1let arr = [88, 20, 10, 100, 50]let re = -1  // 用于存储结果,默认没有for (let i = 0; i < arr.length; i++) {if (arr[i] === 10) {re = i  //如果找到则把当前索引号赋值给 re, 如果没有找到,则默认的是 -1break // 已经找到就退出}}console.log(re)
</script>

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

<script>// 遇到数组 先把遍历写出来!!!!!!!!!!!!!!!=> 访问数组里面的单元的值let arr = [5, 8, 9, 2, 1, 5]let sum = 0for (let i = 0; i < arr.length; i ++) {// sum = sum + itemsum += 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 = 0for(let i = 0; i < arr.length; i++){ave += arr[i]}let aver = ave / arr.lengthdocument.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 = 0for(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 = 0for(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. 渲染图片比较多,我们可以把图片地址放入数组中,

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

  3. 渲染位置? 可以考虑放到 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>
http://www.lryc.cn/news/194621.html

相关文章:

  • FutureTask的测试使用和方法执行分析
  • SpringMVC的请求处理
  • 260. 只出现一次的数字 III
  • 家政预约接单系统,家政保洁小程序开发;
  • 网络安全工程师需要学什么?零基础怎么从入门到精通,看这一篇就够了
  • 出差学知识No3:ubuntu查询文件大小|文件包大小|磁盘占用情况等
  • 详解cv2.copyMakeBorder函数【OpenCV图像边界填充Python版本】
  • 前端技术-并发请求
  • 面试题-React(十三):React中获取Refs的几种方式
  • Linux CentOS 7升级curl8.4.0使用编译安装方式
  • 探寻JWT的本质:它是什么?它有什么作用?
  • 关于雅思听力答案限定字数的解释。
  • 化工python | CSTR连续搅拌反应器系统
  • 交通物流模型 | 基于自监督学习的交通流预测模型
  • 343. 整数拆分 96.不同的二叉搜索树
  • Vue3理解(9)
  • CRM系统中的销售漏斗有什么作用?
  • 项目(模块1:用户登陆流程分析)
  • 2023年中国商用服务机器人行业发展概况分析:国产机器人厂商向海外进军[图]
  • 千兆光模块和万兆光模块的适用场景有哪些
  • 2 files found with path ‘lib/armeabi-v7a/liblog.so‘ from inputs:
  • qt中json类
  • NeurIPS 2023 | AD-PT:首个大规模点云自动驾驶预训练方案
  • 设计模式-结构型模式
  • BUUCTF学习(7): 随便注,固网杯
  • 【文末福利】巧用Chat GPT快速提升职场能力:数据分析与新媒体运营
  • 院内导航系统厂商分析
  • MES系统作业调度
  • C++入门-引用
  • 问题:Qt中软件移植到笔记本中界面出现塌缩