JavaScript综合练习2

news2024/11/28 1:46:49

JavaScript 综合练习 2

1. 案例演示

QQ录屏20240207205838 -original-original

2. 代码实现

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>js综合练习2</title>
	</head>
	<body>
		<input type="text" id="input" />
		<ul id="list"></ul>
		<script>
			// 第一步,获取input当中输入文本的数据getElementById通过id获取界面中的元素对象
			const input = document.getElementById("input");
			// console.log(input);
			const list = document.getElementById("list");
			const todos = [];
			// 监听input的按键事件onkeydown是按键事件,我们给input的按键事件赋予了执行函数
			input.onkeydown = (event) => {
				// console.log(event);
				// 如果这个keyCode是13说明我们按下了回车键
				if (event.keyCode === 13) {
					console.log(event.target.value);
					if (todos.includes(event.target.value)) {
						alert("已经有这个值啦!");
					} else {
						todos.push(event.target.value);
						// 创建一个li标签createElement
						const li = document.createElement("li");
						// innerHTML就是li标签中的内容
						li.innerHTML = event.target.value;
						// appendChild就是将li标签放到ul标签中
						list.appendChild(li);
					}
					// 清空input中的内容
					event.target.value = "";
				}
			};
		</script>
	</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1441160.html

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

相关文章

docker 基于容器创建本地web容器化镜像

一、docker 基于容器创建本地web容器化镜像 1、启动指定buysbox 镜像 docker run --name b1 -it busybox:latest 2、创建目录&#xff0c;并创建html mkdir -p /data/html vi index.html 内容自定义例如&#xff1a;<h1>welcome to busybox<h1> 3、新增窗口&am…

Kubernetes实战(二十七)-HPA实战

1 HPA简介 HPA 全称是 Horizontal Pod Autoscaler&#xff0c;用于POD 水平自动伸缩&#xff0c; HPA 可以 基于 POD CPU 利用率对 deployment 中的 pod 数量进行自动扩缩容&#xff08;除了 CPU 也可以基于自定义的指标进行自动扩缩容&#xff09;。pod 自动缩放不适用于无法…

ubuntu22.04@laptop OpenCV Get Started: 005_rotate_and_translate_image

ubuntu22.04laptop OpenCV Get Started: 005_rotate_and_translate_image 1. 源由2. translate/rotate应用Demo3 translate_image3.1 C应用Demo3.2 Python应用Demo3.3 平移图像过程 4. rotate_image4.1 C应用Demo4.2 Python应用Demo4.3 旋转图像过程 5. 总结6. 参考资料 1. 源由…

Seurat - 聚类教程 (1)

设置 Seurat 对象 在本教程[1]中&#xff0c;我们将分析 10X Genomics 免费提供的外周血单核细胞 (PBMC) 数据集。在 Illumina NextSeq 500 上对 2,700 个单细胞进行了测序。可以在此处[2]找到原始数据。 我们首先读取数据。 Read10X() 函数从 10X 读取 cellranger 管道的输出&…

详细分析Redis性能监控指标 附参数解释(全)

目录 前言1. 基本指标2. 监控命令3. 实战演示 前言 对于Redis的相关知识推荐阅读&#xff1a; Redis框架从入门到学精&#xff08;全&#xff09;Python操作Redis从入门到精通附代码&#xff08;全&#xff09;Redis相关知识 1. 基本指标 Redis 是一个高性能的键值存储系统…

AWS配置内网EC2服务器上网【图形化配置】

第一种方法&#xff1a;创建EC2选择启用分配公网ip 1. 创建vpc 2. 创建子网 3. 创建互联网网关 创建互联网网关 创建互联网网关 &#xff0c;设置名称即可 然后给网关附加到新建的vpc即可 4. 给新建子网添加路由规则&#xff0c;添加新建的互联网网关然后点击保存更改 5. 新建…

《MySQL 简易速速上手小册》第4章:数据安全性管理(2024 最新版)

文章目录 4.1 用户认证和权限控制4.1.1 基础知识4.1.2 重点案例&#xff1a;使用 Python 管理 MySQL 用户权限4.1.3 拓展案例 4.2 防止 SQL 注入和其他安全威胁4.2.1 基础知识4.2.2 重点案例&#xff1a;使用 Python 和 MySQL 进行安全的数据查询4.2.3 拓展案例 4.3 数据加密和…

第十六篇【传奇开心果系列】Python的OpenCV库技术点案例示例:图像质量评估

传奇开心果短博文系列 系列短博文目录Python的OpenCV库技术点案例示例短博文系列博文目录前言一、图像质量评估方法和相关函数的介绍二、均方误差示例代码三、峰值信噪比示例代码四、结构相似性指数示例代码五、视频质量评估示例代码六、OpenCV均方根误差计算示例代码七、OpenC…

了解海外云手机的多种功能

随着社会的高度发展&#xff0c;海外云手机成为商家不可或缺的工具&#xff0c;为企业出海提供了便利的解决方案。然而&#xff0c;谈及海外云手机&#xff0c;很多人仍不了解其强大功能。究竟海外云手机有哪些功能&#xff0c;可以为我们做些什么呢&#xff1f; 由于国内电商竞…

ubuntu22.04 安装部署05:禁用默认显卡驱动

一、相关文章 ubuntu22.04安装部署03&#xff1a; 设置root密码-CSDN博客 《ubuntu22.04装部署01&#xff1a;禁用内核更新》 《ubuntu22.04装部署02&#xff1a;禁用显卡更新》 二、场景说明 Ubuntu22.04 默认显卡驱动&#xff0c;如果安装cuda&#xff0c;需要单独安装显…

Javaweb之SpringBootWeb案例之异常处理功能的详细解析

3. 异常处理 3.1 当前问题 登录功能和登录校验功能我们都实现了&#xff0c;下面我们学习下今天最后一块技术点&#xff1a;异常处理。首先我们先来看一下系统出现异常之后会发生什么现象&#xff0c;再来介绍异常处理的方案。 我们打开浏览器&#xff0c;访问系统中的新增部…

【开源项目阅读】Java爬虫抓取豆瓣图书信息

原项目链接 Java爬虫抓取豆瓣图书信息 本地运行 运行过程 另建项目&#xff0c;把四个源代码文件拷贝到自己的包下面 在代码爆红处按ALTENTER自动导入maven依赖 直接运行Main.main方法&#xff0c;启动项目 运行结果 在本地磁盘上生成三个xml文件 其中的内容即位爬取…

MPLS VPN功能组件(3)

私网标签分配 通过MPBGP为VPNv4路由分配内层标签 PE从CE接收到IPv4路由后&#xff0c;对该路由加上相应VRF的RD&#xff08;RD手动配置&#xff09;&#xff0c;使其成为一条VPNV4路由&#xff0c;然后在路由通告中更改下一跳属性为自己&#xff0c;通常是自己的Loopback地址…

【Linux】进程学习(二):进程状态

目录 1.进程状态1.1 阻塞1.2 挂起 2. 进程状态2.1 运行状态-R进一步理解运行状态 2.2 睡眠状态-S2.3 休眠状态-D2.4 暂停状态-T2.5 僵尸状态-Z僵尸进程的危害 2.6 死亡状态-X2.7 孤儿进程 1.进程状态 1.1 阻塞 阻塞&#xff1a;进程因为等待某种条件就绪&#xff0c;而导致的…

Linux操作系统基础(四):Linux连接工具使用

文章目录 Linux连接工具使用 一、为什么要使用远程连接工具 二、虚拟机网络配置 三、获取Linux操作系统IP地址 四、聊一聊Linux系统账号 五、安装finalshell远程连接软件 六、建立连接 七、软件界面与使用说明 Linux连接工具使用 一、为什么要使用远程连接工具 因为一…

USMART是什么?

一、USMART简介 USMART是一个串口调试组件&#xff0c;可以大大提高代码调试效率&#xff0c;为正点原子为STM32开发的类似linux中shell的调试工具。 一般开发者正常情况下&#xff0c;对单片机功能进行调试的过程大致为&#xff1a;下载——调试——修改——下载——调试——…

解决MapboxGL的Popup不支持HTMLDiv元素的问题

解决MapboxGL的Popup不支持HTMLDiv元素的问题 官网给出的文档是不支持HTMLDivElement的&#xff0c;只支持HTML标签。 如果单纯的只显示字符串&#xff0c;那就没问题&#xff0c;如果想在Popup中使用更强大的功能&#xff0c;此时就不行了&#xff0c;下面是源码的一部分显示…

[VulnHub靶机渗透] Sar: 1

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

Python环境下基于最大离散重叠小波变换和支持向量回归的金融时间序列预测

金融时间序列具有非线性、高频性、随机性等特点&#xff0c;其波动情况不仅与当前股票市场、房地产市场、贸易市场等有强联动性&#xff0c;而且大幅度起伏对于其他市场有较大的影响和冲击。由于金融市场受多种因素影响且各影响因素间也存在一定复杂动态交互关系&#xff0c;导…

[CUDA手搓]从零开始用C++ CUDA搭建一个卷积神经网络(LeNet),了解神经网络各个层背后算法原理

文章目录 前言一、所需环境二、实现思路2.1. 定义了LeNet网络模型结构&#xff0c;并训练了20次2.2 以txt格式导出训练结果(模型的各个层权重偏置等参数)2.3 (可选)以pth格式导出训练结果&#xff0c;以方便后期调试2.4 C CUDA要做的事 三、C CUDA具体实现3.1 新建.cu文件并填好…