js基础-练习三

九九乘法表:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=sc, initial-scale=1.0"><title>九九乘法表</title><style>span {height: 30px;width: 80px;display: inline-block;border: 1px solid #ccc;/* padding: 1px 2px; */margin: 2px;text-align: center;line-height: 30px;box-shadow: 2px 1px 1px rgba(56, 56, 127, 0.3);}</style>
</head><body><h3>九九乘法表</h3><script>for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(`<span>${j}*${i}=${i * j} </span>`)}document.write('<br>')}</script>
</body></html>

运行结果:

根据数据生成柱形图:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例-根据数据生成柱形图素材</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><script>let arr = []for (let i = 1; i <= 4; i++) {arr.push(prompt(`请输入第${i}季度的数据`))}document.write(`<div class="box">`)for (i = 0; i < arr.length; i++) {document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i}季度</h4></div>`)}document.write(`</div>`)</script>
</body></html>

运行结果:

 

 

 

 

 

写一个程序,要求如下(★★)

  • 需求1:让用户输入五个有效年龄(0-100之间),放入数组中

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

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

  • 需求3:打印出所有人总年龄 (累加)

  • 需求4:打印出所有人的平均年龄 (累加)

  • 需求5:打印出最大年龄和最小年龄 (最大值)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习题一</title>
</head><body><script>let arr = []while (arr.length < 5) {let age = +prompt(`请您输入五个有效年龄(0-100之间)`)if (age >= 0 && age <= 100) {arr.push(age)}}document.write(`${arr}\<br>`);for (let i = 0; i < arr.length; i++) {if (arr[i] >= 18) {document.write(`已经成人的年纪是${arr[i]}岁\<br>`)}}let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}document.write(`所有人的总年龄为${sum}\岁<br>`)document.write(`所有人的平均年龄为${sum / arr.length}岁\<br>`)let max = arr[0]let min = arr[0]for (let i = 0; i < arr.length - 1; i++) {if (arr[i] < arr[i + 1]) {max = arr[i + 1]}if (arr[i] > arr[i + 1]) {mIn = arr[i + 1]}}document.write(`最大年龄为${max}岁\<br>`)document.write(`最小年龄为${min}岁\<br>`)</script>
</body></html>

运行结果(忽略输入过程):

 

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

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

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

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习题二</title>
    </head><body><script>let arr = [88, 20, 10, 100, 50]let re = -1for (let i = 0; i < arr.length; i++) {if (arr[i] === 10) {re = ibreak}}document.write(re)</script>
    </body></html>

    核心练习:

  • 需求:

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

    效果如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><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.mzph.cn/news/7122.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NLP杂记

来京一周余&#xff0c;初病将愈&#xff0c;终跑通llama及ViT&#xff0c;记于此—— 之前都是做的图像&#xff0c;大模型迁移基本上都是NLP相关的知识&#xff0c;很多东西和CV差距还是有点&#xff0c;再加上大模型对算力要求较高&#xff0c;基于云的操作对我一个习惯在本…

【uniapp学习之】uni-forms必填项校验

代码块 <uni-forms ref"baseForm" :modelValue"baseFormData" label-widthauto :rules"rules"><uni-forms-item label"企业名称" required name"principalName"><uni-easyinput v-model"baseFormData.…

node中间件-koa框架

文章目录 1. koa 基本使用2. 参数解析3. 请求路径区分4. 路由5 参数解析5.1 params 与query解析5.2 body参数与urlencoded 解析5.3 form-data参数 6 . 文件上传7. 静态服务器8 响应数据9 错误处理 1. koa 基本使用 安装 npm i koakoa导出的是一个类&#xff0c;必须用new关键字…

Linux 用户组相关命令

添加用户组的命令是 groupadd&#xff0c;命令格式如下: [rootlocalhost ~]# groupadd [选项] 组名 选项&#xff1a; -g GID&#xff1a;指定组 ID&#xff1b;-r&#xff1a;创建系统群组。 使用 groupadd 命令创建新群组非常简单&#xff0c;例如&#xff1a; [rootlocalh…

Pytorch个人学习记录总结 05

目录 神经网络的基本骨架 卷积操作 torch.nn.functional.conv2d 神经网络的基本骨架 搭建Neural Network骨架主要用到的包是torch.nn&#xff0c;官方文档网址&#xff1a;torch.nn — PyTorch 2.0 documentation&#xff0c;其中torch.nn.Module很重要&#xff0c;是所有所…

springboot mybatis-plus 多数据源配置(HikariCP)

1.导入依赖jar <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>org.postgresql</groupId><artifactId>postgres…

【JVM】浅看JVM的运行流程和垃圾回收

1.JVM是什么 JVM&#xff08; Java Virtual Machine&#xff09;就是Java虚拟机。 Java的程序都运行在JVM中。 2.JVM的运行流程 JVM的执行流程&#xff1a; 程序在执行之前先要把java代码转换成字节码&#xff08;class文件&#xff09;&#xff0c;JVM 首先需要把字节码通过…

springboot中logback日志配置

springboot中logback日志配置 前言默认配置logback-spring.xml详细配置 前言 Spring Boot使用Apache的Commons Logging作为内部的日志框架&#xff0c;其仅仅是一个日志接口&#xff0c;在实际应用中需要为该接口来指定相应的日志实现。 Spring Boot从1.4版本开始内置的日志框…

程序员面试系列,kafka常见面试题

原文链接 Kafka是什么&#xff1f;它的主要作用是什么&#xff1f;什么是Kafka的主题&#xff08;Topic&#xff09;和分区&#xff08;Partition&#xff09;&#xff1f;Kafka中的消息是如何被生产者发送和消费者接收的&#xff1f;Kafka中的分区有什么作用&#xff1f;为什…

聊聊Linq中.AsEnumerable(), AsQueryable() ,.ToList(),的区别和用法

聊聊Linq中.AsEnumerable(), AsQueryable() ,.ToList(),的区别和用法 当使用LINQ查询数据时&#xff0c;我们常常会面临选择使用.AsEnumerable(), .AsQueryable(), 和 .ToList()方法的情况。这些方法在使用时有不同的效果和影响&#xff0c;需要根据具体场景来选择合适的方法。…

springboot热加载spring-boot-devtools:

springboot热加载 基于idea开发springboot项目使用热加载 pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</op…

金融领域:产业链知识图谱包括上市公司、行业和产品共3类实体,构建并形成了一个节点10w+,关系边16w的十万级别产业链图谱

项目设计集合&#xff08;人工智能方向&#xff09;&#xff1a;助力新人快速实战掌握技能、自主完成项目设计升级&#xff0c;提升自身的硬实力&#xff08;不仅限NLP、知识图谱、计算机视觉等领域&#xff09;&#xff1a;汇总有意义的项目设计集合&#xff0c;助力新人快速实…

前端 | ( 十三)CSS3简介及基本语法(下)| 伸缩盒模型 | 尚硅谷前端html+css零基础教程2023最新

学习来源&#xff1a;尚硅谷前端htmlcss零基础教程&#xff0c;2023最新前端开发html5css3视频 系列笔记&#xff1a; 【HTML4】&#xff08;一&#xff09;前端简介【HTML4】&#xff08;二&#xff09;各种各样的常用标签【HTML4】&#xff08;三&#xff09;表单及HTML4收尾…

Go 语言 值类型和引用类型

Go 语言 值类型和引用类型 值类型&#xff1a; 概述&#xff1a; 值类型的人变量直接存储其值&#xff0c;他们通常在栈上分配内存。当把一个值类型的变量赋值给另外一个变量、作为函数参数传递或从函数返回时&#xff0c;进行值的复制。因此每个变量都有自己独立的存储&…

Flutter 自定义 虚线 分割线

学习使用Flutter 进行 虚线 自定义控件 练习 // 自定义虚线 &#xff08;默认是垂直方向&#xff09; class DashedLind extends StatelessWidget {final Axis axis; // 虚线方向final double dashedWidth; // 根据虚线的方向确定自己虚线的宽度final double dashedHeight; //…

实训笔记7.24

实训笔记7.24 7.24笔记一、Hadoop中MapReduce框架的使用原理和流程1.1 涉及到一些框架核心组件1.1.1 InputFotmat1.1.2 MapTask1.1. 3Partitioner1.1.4 WritableComparable1.1.5 Combiner&#xff08;可选&#xff09;1.1.6 WritableComparator(GroupingComparator)1.1.7 Reduc…

c++ 之 dynamic_pointer_cast

/* * dynamic_pointer_cast */ 描述 (Description) 它返回一个正确类型的sp副本&#xff0c;其存储的指针从U *动态地转换为T *。 声明 (Declaration) 以下是std :: dynamic_pointer_cast的声明。 template <class T, class U> shar…

微服务保护——Sentinel【实战篇二】

一、线程隔离 &#x1f349; 线程隔离有两种方式实现&#xff1a; 线程池隔离信号量隔离&#xff08;Sentinel默认采用&#xff09; 线程隔离&#xff08;舱壁模式&#xff09;&#x1f95d; 在添加限流规则时&#xff0c;可以选择两种阈值类型&#xff1a; QPS&#xff1a;…

SpringBoot-4

Spring Boot 使用 slf4j 日志 在开发中经常使用 System.out.println()来打印一些信息&#xff0c;但是这样不好&#xff0c;因为大量的使用 System.out 会增加资源的消耗。实际项目中使用的是 slf4j 的 logback 来输出日志&#xff0c;效率挺高的&#xff0c;Spring Boot 提供…

NLP 中的pad/padding操作代码分析

今天分析一下NLP中的pad操作代码&#xff1a; 该方法的作用是将输入的序列列表seqs进行填充操作&#xff0c;使其具有相同的长度&#xff0c;以便进行批处理。填充使用指定的pad_token进行&#xff0c;并生成一个对应的mask标志列表&#xff0c;用于标记哪些部分是填充内容&am…