【JavaScript】九、JS基础练习
文章目录
- 1、练习：对象数组的遍历
- 2、练习：猜数字
- 3、练习：生成随机颜色
1、练习：对象数组的遍历
需求：定义多个对象，存数组，遍历数据渲染生成表格
let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小红', age: 19, gender: '女', hometown: '河南省' },{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
for (let i = 0; i < students.length; i++) {for (let key in students[i]) {console.log(students[i][key]) // 拿到每个对象后，for in遍历对象}
}
一般来说，目前没有学dom操作，打印下面这个表格，都是先写出死的html，再把html分块剪切到script标签中，使用document.write来输出html标签
静态html：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;border-collapse: collapse;}caption {font-size: 18px;margin-bottom: 10px;font-weight: 700;}tr {height: 40px;cursor: pointer;}table tr:nth-child(1) {background-color: #ddd;}table tr:not(:first-child):hover {background-color: #eee;}</style>
</head><body><h2>学生信息</h2><p>将数据渲染到页面中...</p><table><caption>学生列表</caption><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>家乡</th></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr></table></body></html>
结合JS：
<body><h2>学生列表</h2><table><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>家乡</th></tr><script>let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小红', age: 19, gender: '女', hometown: '河南省' },{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }]for (let i = 0; i < students.length; i++) {// 拿到每一个对象let student = students[i]document.write(`<tr><td>${i + 1}</td>`)// 遍历对象的每个属性for (let key in student) {document.write(`<td>${student[key]}</td> `)}// 一行数据写完了，打印结束标签document.write(`</tr>`)}</script></table></body>
但这里想复杂了，没必要普通for套一个for in，直接一层for循环：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;border-collapse: collapse;}caption {font-size: 18px;margin-bottom: 10px;font-weight: 700;}tr {height: 40px;cursor: pointer;}table tr:nth-child(1) {background-color: #ddd;}table tr:not(:first-child):hover {background-color: #eee;}</style>
</head><body><h2>学生信息</h2><p>将数据渲染到页面中...</p><table><caption>学生列表</caption><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>家乡</th></tr><!-- 数据部分才需要渲染，表头不用，所以script写这儿 --><script>// 数据准备let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小红', age: 19, gender: '女', hometown: '河南省' },{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }]// 渲染页面for (let i = 0; i < students.length; i++) {// 模板字符串+document.write输出标签document.write(`<tr><td>${i + 1}</td><td>${students[i].name}</td><td>${students[i].age}</td><td>${students[i].gender}</td><td>${students[i].hometown}</td></tr>`)}document.write</script></table></body></html>
这里本质是遍历数组 + 获取对象的属性值，那么查对象的两种语法都可以用，不必硬套for in
2、练习：猜数字
需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字
- 如果大于该数字，就提示，数字猜大了，继续猜
- 如果小于该数字，就提示，数字猜小了，继续猜
- 如果猜对了，就提示猜对了，程序结束
<body><script>function guessNum(num = 0) {let random = Math.floor(Math.random() * 10 + 1)console.log(random)let count = 1// 或者while (true)for (; ;) {if (count >= 4) {alert(`超过四次没猜对了，答案是${random}`)break}if (num === random) {alert('猜对了～')break} else if (num > random) {alert('猜大了！')count++num = +prompt('请重新输入一个数字')} else if (num < random) {alert('猜小了！')count++num = +prompt('请重新输入一个数字')}}}let num = +prompt('请输入一个数字')guessNum(num)</script>
</body>3、练习：生成随机颜色
需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式
- 提示: 16进制颜色格式为: #ffffff， 其中f可以是任意 0-f之间的字符,需要用到数组，
let arr =['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'] - 提示: rgb颜色格式为: rgb(255,255,255) ，其中255可以是任意0-255之间的数字
<body><script>// 随机颜色function getRandomColor(format = true) {let result = ''if (!format) {// 返回rgb(255,255,255)格式let r = Math.floor(Math.random() * 256)let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)result = `rbg(${r},${g},${b})`} else {result = '#'let array = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']for (let i = 1; i <= 6; i++) {let random = Math.floor(Math.random() * array.length)result = result + array[random]}}return result;}document.write(getRandomColor(true))</script>
</body>VsCode中，Alt + ⬇️ 或者option + ⬇️，把一行代码直接向下移动，不用剪切后复制
相关文章：
【JavaScript】九、JS基础练习
文章目录 1、练习：对象数组的遍历2、练习：猜数字3、练习：生成随机颜色 1、练习：对象数组的遍历 需求：定义多个对象，存数组，遍历数据渲染生成表格 let students [{ name: 小明, age: 18, gend…...
RAG、大模型与智能体的关系
一句话总结： RAG（中文为检索增强生成） 检索技术 LLM 提示。 RAG、大模型与智能体的关系解析 1. 核心概念定义 RAG（检索增强生成） 是一种结合信息检索与生成式模型的框架，通过从外部知识库（如…...
使用firewall-cmd配置SIP端口转发,实现双网卡互通,内外网方式
使用firewall-cmd配置SIP端口转发,实现双网卡,内外网方式 脚本内容 这里以内网IP: 192.168.2.88 这里以外网IP: 10.3.3.3 以下是一个用于启用和停用端口转发的Shell脚本： #!/bin/bash# 配置变量 ZONE"public" TARGET_IP"192.168.2.88" POR…...
Oracle数据库数据编程SQL＜3.2 PL/SQL 匿名块中的DML操作、动态SQL、实际应用场景、使用技巧＞
匿名块是学习和测试PL/SQL代码的强大工具，特别适合执行一次性任务或快速验证业务逻辑。 目录 一、匿名块中的DML操作 1. INSERT 示例 2. UPDATE 示例 3. DELETE 示例 二、匿名块中的动态SQL 1. EXECUTE IMMEDIATE 2. 动态游标--下篇文章会具体展开详细分享该…...
Spring AI Alibaba 实战：集成 OpenManus 实现智能体应用开发
引言 2024 年 9 月，阿里云正式开源 Spring AI Alibaba，为 Java 开发者提供了一套完整的 AI 应用开发框架，支持与通义系列大模型深度集成，并覆盖了从模型调用到云原生部署的全链路能力。而近期，中国团队发布的通用型 A…...
Linux中《进程状态--进程调度--进程切换》详细介绍
目录 进程状态Linux内核源代码怎么说运行&&阻塞&&挂起内核链表 进程状态查看Z(zombie)-僵尸进程僵尸进程危害孤儿进程 进程优先级进程切换Linux2.6内核进程O(1)调度队列 进程状态 Linux内核源代码怎么说 为了弄明白正在运⾏的进程是什么意思，我们…...
Element PlusAnt-design常问问题详解
Element UI Plus 高频面试问题解析（2025 版） 一、核心组件使用与原理 动态表头实现方案 • 场景：如何根据接口数据动态生成表头？ • 技术方案： ◦ 使用 v-for 遍历表头数组生成 el-table-column ◦ 结合 render-header 属性实现复杂表头（如带提示的标题） ◦ 示例代码：通…...
】打造商城监控利器Prometheus与Grafana)
【商城实战(96)】打造商城监控利器Prometheus与Grafana
【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配…...
Megatron-LM中的deepseek-v3实现
Megatron-LM：https://github.com/NVIDIA/Megatron-LM/tree/main 使用此仓库构建的著名的库也有很多，如: Colossal-AI, HuggingFace Accelerate, and NVIDIA NeMo Framework.Pai-Megatron-Patch工具是阿里人工智能平台PAI算法团队研发,ai-Megatron-Patch…...
SpringCloud如何整合DeepSeek
SpringCloud 整合 DeepSeek 的核心目标是通过微服务架构调用其分布式文件系统（如 3FS）或 API 服务。以下从技术选型、整合步骤和关键配置三个方面展开说明： 一、技术选型与架构分析 DeepSeek 服务类型 3FS 分布式文件系统：基于 RD…...
蓝桥杯备考：多米诺骨牌
这道题要求上下方格子和之差要最小，其实就是算每个上下格子的差求和的最小值 这道题其实是动态规划01背包问题 我们直接按步骤做吧 step1:定义状态表示f[i][j]表示从1到i个编号的差值里选出刚好j个数的最小操作次数 step2:推导状态转移方程 如图这就是我们的状态…...
wireshark开启对https密文抓包
HTTPS抓包解密指南 通常情况下，Wireshark只能抓取HTTP的明文包，对于HTTPS的报文需要特殊设置才能抓取。如果不进行设置，抓取到的都是TLS加密报文，这对调试工作造成了很大困难。 前言 提到HTTPS抓包，基本都绕不开SSL…...
AudioFlinger与AudioPoliceManager初始化流程
AF/APF启动流程 在启动AudioSeriver服务的过程中会对启动AF/APF。main_audioserver.cpp有如下代码： AudioFlinger::instantiate();AudioPolicyService::instantiate();AF初始化流程 1.AudioFlinger::instantiate() 1.1 AudioFlinger构造函数 void AudioFlinger:…...
网路传输层UDP/TCP
一、端口号 1.端口号 1.1 五元组 端口号(port)标识了一个主机上进行通信的不同的应用程序. 如图所示, 在一个机器上运行着许多进程, 每个进程使用的应用层协议都不一样, 比如FTP, SSH, SMTP, HTTP等. 当主机接收到一个报文中, 网络层一定封装了一个目的ip标识我这台主机, …...
Python大数据处理 基本的编程方法
目录 一、实验目的 二、实验要求 三、实验代码 四、实验结果 五、实验体会 一、实验目的 体会基本的python编程方法；学习python中的各类函数；了解python读取与写入文件的方法。 二、实验要求 输入2000年后的某年某月某日，判断这一天是…...
STM32F103_LL库+寄存器学习笔记06 - 梳理串口与串行发送“Hello,World“
导言 USART是嵌入式非常重要的通讯方式，它的功能强大、灵活性高且用途广泛。只停留在HAL库层面上用USART只能算是入门，要加深对USART的理解，必须从寄存器层面入手。接下来，先从最简单的USART串行发送开始。 另外，在接…...
硬件基础--14_电功率
电功率 电功率:指电流在单位时间内做的功(表示用电器消耗电能快慢的一个物理量)。 单位:瓦特(W)，简称瓦。 公式:PUI(U为电压，单位为V，i为电流，单位为A，P为电功率，单位为W)。 单位换算:进位为1000ÿ…...
【C#语言】C#文件操作实战：动态路径处理与安全写入
文章目录 ⭐前言⭐一、场景痛点⭐二、完整实现代码⭐三、关键技术解析🌟1、动态路径处理🌟2、智能目录创建🌟3、安全的文件写入 ⭐四、进阶扩展方案🌟1、用户自定义路径选择🌟2、异常处理增强🌟3、异步写入…...
Vue.js 完全指南：从入门到精通
1. Vue.js 简介 1.1 什么是 Vue.js？ Vue.js（通常简称为 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。所谓"渐进式"，意味着 Vue 的设计是由浅入深的，你可以根据自己的需求选择使用它的一部分或全部功能。 Vue 最初由尤雨溪（Evan You）在 2014 年创…...
在Git仓库的Readme上增加目录页
一般在编写Readme时想要增加像文章那样的目录，方便快速跳转，但是Markdown语法并没有提供这样的方法，但是可以通过超链接结合锚点的方式来实现，如下图是我之前一个项目里写的Readme： 例如有下面几个Readme内容ÿ…...
C# SolidWorks 二次开发 -各种菜单命令增加方式
今天给大家讲一讲solidworks中各种菜单界面，如下图，大概有13处，也许还不完整哈。 1.CommandManager选项卡2.下拉选项卡3.菜单栏4.下级菜单5.浮动工具栏6.快捷方式工具栏7.FeatureManager工具栏区域8.MontionManager区域 ModelView?9.任务窗…...
分布式架构-Spring技术如何能实现分布式事务
在Spring技术栈中实现分布式事务，可通过多种成熟方案实现跨服务或跨数据库的事务一致性管理。以下是主要实现方式及技术要点： 一、基于Seata框架的AT模式 核心组件 TC (Transaction Coordinator)：全局事务协调器（独立部署…...
【RocketMQRocketMQ Dashbord】Springboot整合RocketMQ
【RocketMQ&&RocketMQ Dashbord】Springboot整合RocketMQ 【一】Mac安装RocketMQ和RocketMQ Dashbord【1】安装RocketMQ（1）下载（2）修改 JVM 参数（3）启动测试（4）关闭测试&…...
vue 3 深度指南：从基础到全栈开发实践
目录 一、环境搭建与项目初始化 1. 前置依赖安装 2. 项目初始化与结构解析 二、核心概念与语法深度解析 1. MVVM 模式与响应式原理 2. 模板语法与指令进阶 3. 组件化开发 三、进阶开发与全栈集成 1. 路由管理（Vue Router） 2. 状态管理…...
《白帽子讲 Web 安全》之跨站请求伪造
引言 在数字化时代，网络已深度融入人们生活的方方面面，Web 应用如雨后春笋般蓬勃发展，为人们提供着便捷高效的服务。然而，繁荣的背后却潜藏着诸多安全隐患，跨站请求伪造（CSRF）便是其中极为隐蔽…...
K8S学习之基础五十：k8s中pod时区问题并通过kibana查看日志
k8s中pod默认时区不是中国的，挂载一个时区可以解决 vi pod.yaml apiVersion: v1 kind: Pod metadata:name: counter spec:containers:- name: countimage: 172.16.80.140/busybox/busybox:latestimagePullPolicy: IfNotPresentargs: [/bin/sh,-c,i0;while true;do …...
nginx代理前端请求
一，项目配置 我在 ip 为 192.168.31.177 的机器上使用 vue3 开发前端项目，项目中使用 axios 调用后端接口。 这是 axios 的配置： import axios from axios;const request axios.create({baseURL: http://192.168.31.177:8001,// 设置请求…...
LibVLC —— 《基于Qt的LibVLC专业开发技术》视频教程
🔔 LibVLC/VLC 相关技术、疑难杂症文章合集（掌握后可自封大侠 ⓿_⓿）（记得收藏，持续更新中…） 《基于Qt的LibVLC专业开发技术》课程视频，（CSDN课程主页、51CTO课程主页） 适合具有一些C++/Qt编程基础，想要进一步提高或涉足音视频行业的。本课程分7章节，共计35小节。…...
Android生态大变革，谷歌调整开源政策，核心开发不再公开
“开源”这个词曾经是Android的护城河，如今却成了谷歌的烫手山芋。最近谷歌宣布调整Android的开源政策，核心开发将全面转向私有分支。翻译成人话就是：以后Android的核心更新，不再公开共享了。 这操作不就是开源变节吗，…...
Android Gradle 插件问题：The option ‘android.useDeprecatedNdk‘ is deprecated.
问题与处理策略 问题描述 在 Android 项目中，报如下警告 The option android.useDeprecatedNdk is deprecated. The current default is false. It has been removed from the current version of the Android Gradle plugin. NdkCompile is no longer supported…...