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

javaScript操作dom的事件（3个案例+代码+效果图）

news 文章来源：https://blog.csdn.net/2301_76862031/article/details/142744196 2025/5/10 3:48:46

目录

1.焦点事件

案例:登录表单的验证

1.代码

2.效果

3.解释

2.鼠标事件

案例:单击鼠标使小球跳跃

1.代码

2.效果

3.解释

3.键盘事件

案例:使用左右键控制小球左右移动

1.代码

2.效果

编辑

3.解释

1.焦点事件

focus 当获得焦点时出发(不会冒泡)
blur 当失去焦点时出发(不会冒泡)

案例:登录表单的验证

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录表单的验证</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;margin: 0;padding: 20px;display: flex;justify-content: center;align-items: center;height: 100vh;}.myLoginStyle {background-color: #fff;border: 1px solid #ccc;border-radius: 5px;padding: 20px;width: 300px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.myNameDivStyle,.myPassowordStyle {margin-bottom: 10px;display: flex;align-items: center;}.myNameDivStyle label,.myPassowordStyle label {width: 60px;text-align: right;margin-right: 10px;}.myNameInputStyle,.myPasswordInputStyle {width: calc(100% - 70px); /* 减去标签宽度 */padding: 10px;border: 1px solid #ccc;border-radius: 5px;font-size: 16px;}.myNameInputStyle:focus,.myPasswordInputStyle:focus {outline: none;border-color: #007bff;box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);}button {background-color: #007bff;color: white;border: none;padding: 10px 20px;font-size: 16px;cursor: pointer;border-radius: 5px;margin-top: 10px;transition: background-color 0.3s ease;width: 100%;}button:hover {background-color: #0056b3;}</style>
</head>
<body><div class="myLoginStyle"><div class="myNameDivStyle"><label for="username">用户：</label><input type="text" id="username" placeholder="请输入用户名" class="myNameInputStyle"></div><div class="myPassowordStyle"><label for="password">密码：</label><input type="password" id="password" placeholder="请输入密码" class="myPasswordInputStyle"></div><button id="submitButtonStyle">登录</button></div><!-- 表单验证 --><script>//获取用户输入框var myNameInput = document.querySelector(".myNameInputStyle");//获取密码框var myPasswordInput = document.querySelector(".myPasswordInputStyle");//获取登录按钮var submitButton = document.querySelector("#submitButtonStyle");//用户输入框获得焦距修改样式myNameInput.onfocus = function () {//文字样式修改myNameInput.style.borderColor = "#007bff";myNameInput.style.boxShadow = "0 0 5px rgba(0, 123, 255, 0.5)";myNameInput.style.fontSize = "16px"; // 修复字体大小}myPasswordInput.onfocus = function () {//文字样式修改myPasswordInput.style.borderColor = "#007bff";myPasswordInput.style.boxShadow = "0 0 5px rgba(0, 123, 255, 0.5)";myPasswordInput.style.fontSize = "16px"; // 修复字体大小}//输入框失去焦距修改样式myNameInput.onblur = function () {//文字样式修改myNameInput.style.borderColor = "#ccc";myNameInput.style.boxShadow = "none";myNameInput.style.fontSize = "16px"; // 修复字体大小if (myNameInput.value === "") {alert("用户名不能为空");}}myPasswordInput.onblur = function () {//文字样式修改myPasswordInput.style.borderColor = "#ccc";myPasswordInput.style.boxShadow = "none";myPasswordInput.style.fontSize = "16px"; // 修复字体大小if (myPasswordInput.value === "") {alert("密码不能为空");}}// 登录按钮的判断submitButton.onclick = function () {// 获取用户输入的用户名和密码var username = myNameInput.value;var password = myPasswordInput.value;// 判断用户名和密码是否为空if (username === "" || password === "") {alert("用户名或密码不能为空");return;}alert("登录成功！"+ "\n用户名：" + username+ "\n密码：" + password);}</script>
</body>
</html>

2.效果

初始界面

用户名验证

密码框验证

注:这里只是简单的使用了一下非空判断，如果要进行复杂的判断可以使用正则表达式去判断

登录验证

密码验证不去实验了有兴趣可以自己去测试

登录成功验证

3.解释

HTML结构

页面有一个标题“登录表单的验证”。
页面中心有一个登录框，它包含两个输入字段：一个是用户名，另一个是密码。
用户名和密码输入框都有占位符提示用户输入什么内容。
有一个登录按钮。

CSS样式

页面整体使用了浅灰色背景，字体为Arial或无衬线字体。
登录框是一个白色的方块，有圆角、边框和阴影效果，看起来比较美观。
输入框旁边有标签显示“用户：”和“密码：”，并且当输入框获得焦点时会有蓝色边框和阴影效果。
登录按钮是蓝色的，鼠标悬停时颜色会变深一点。

JavaScript功能

当用户名输入框获得焦点时，边框颜色变成蓝色，并且出现一个轻微的蓝色阴影效果。
当用户名输入框失去焦点时，如果用户没有输入任何内容，则会弹出警告提示“用户名不能为空”。
密码输入框的行为与用户名输入框类似，只是它检查的是密码是否为空。
当点击登录按钮时，脚本会检查用户名和密码是否都已填写。如果有任何一个为空，就弹出警告说“用户名或密码不能为空”。如果都填写了，则会弹出一个消息窗口显示“登录成功！”以及用户输入的用户名和密码。

2.鼠标事件

click 鼠标单击出发
dbclick 鼠标双击出发
mouseover 鼠标悬浮触发
mouseenter 鼠标移入触发
mouseleave 鼠标移除出发
mousedown 鼠标任意按下按下出发
mouseup 鼠标任意案件抬起出发
mousemove 当元素内鼠标指针移动时持续触发

案例:单击鼠标使小球跳跃

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单击鼠标使小球跳跃</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;margin: 0;padding: 20px;display: flex;justify-content: center;align-items: center;height: 100vh;}#ballContainStyle {position: relative;width: 300px;height: 300px;background-color: #fff;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);overflow: hidden;}#ball {position: absolute;width: 30px;height: 30px;background-color: #007bff;border-radius: 50%;bottom: 0;left: 50%;transform: translateX(-50%);transition: all 0.5s ease;animation: ballBreath 1s linear infinite;}/*呼吸动画*/@keyframes ballBreath {0% {transform: scale(1);}50% {transform: scale(1.2);}100% {transform: scale(1);}}</style>
</head>
<body><div id="ballContainStyle"><div id="ball"></div></div><audio id="myAudio" src="https://freepd.com/music/The%20Celebrated%20Minuet.mp3" loop autoplay hidden></audio><script>// 获取容器和小球var ballContain = document.querySelector("#ballContainStyle");var ball = document.querySelector("#ball");// 初始化小球位置ball.style.bottom = '0px';// 点击事件处理ballContain.onclick = function () {// 获取小球当前的 bottom 值var ballBottom = parseInt(ball.style.bottom || 0);// 计算新的 bottom 值var newBottom = ballBottom + 200; // 向上跳// 检查新位置是否有效if (0 <= newBottom && newBottom <= ballContain.clientHeight) {ball.style.bottom = newBottom + "px";ball.style.transition = "all 0.5s ease";}};// 使用 setInterval() 小球自动下落setInterval(function () {// 获取小球当前的 bottom 值var ballBottom = parseInt(ball.style.bottom || 0);// 计算新的 bottom 值var newBottom = ballBottom - 10; // 向下落// 检查新位置是否有效if (0 <= newBottom && newBottom <= ballContain.clientHeight) {ball.style.bottom = newBottom + "px";} else if (newBottom < 0) { // 如果超出范围，重置到底部ball.style.bottom = '0px';}}, 30);</script>
</body>
</html>

2.效果

3.解释

HTML部分:
- 页面有一个标题“使用左右键控制小球移动”。
- 有一个300x300像素大小的白色方块（#ballContainStyle），里面包含一个蓝色的小球（#ball）。
- 页面还有一段隐藏的背景音乐，会自动播放并循环。
CSS样式:
- 整个页面居中显示，背景颜色是浅灰色。
- 小球容器有圆角、边框和阴影效果，看起来更美观。
- 小球是一个圆形，初始位置在容器底部中间，并且它会周期性地放大缩小，像是在呼吸一样。
JavaScript功能:
- 当你点击小球容器时，小球会向上跳起一段距离。
- 每隔30毫秒（大约每秒33次），小球会自动向下落一点。如果小球掉到容器外面了，它会重新出现在容器底部。
- 如果你按住左箭头键，小球会向左边移动；当你松开右箭头键时，小球会向右边移动。不过这里有个小问题：通常我们会在按键按下时处理移动逻辑，而不是在按键松开时。所以可能需要调整一下，让右箭头键也在按下时就触发移动。

3.键盘事件

keypress 按键盘按键时触发
keydown 按键盘按键时触发
keyup 键盘按键弹起时触发

案例:使用左右键控制小球左右移动

1.代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用左右键控制小球移动</title><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;margin: 0;padding: 20px;display: flex;justify-content: center;align-items: center;height: 100vh;}#ballContainStyle {position: relative;width: 300px;height: 300px;background-color: #fff;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);overflow: hidden;}#ball {position: absolute;width: 30px;height: 30px;background-color: #007bff;border-radius: 50%;bottom: 0;left: 50%;transform: translateX(-50%);transition: all 0.5s ease;animation: ballBreath 1s linear infinite;}/*呼吸动画*/@keyframes ballBreath {0% {transform: scale(1);}50% {transform: scale(1.2);}100% {transform: scale(1);}}</style>
</head>
<body><div id="ballContainStyle"><div id="ball"></div></div><audio id="myAudio" src="https://freepd.com/music/The%20Celebrated%20Minuet.mp3" loop autoplay hidden></audio><script>// 获取容器和小球var ballContain = document.querySelector("#ballContainStyle");var ball = document.querySelector("#ball");// 初始化小球位置ball.style.bottom = '0px';// 点击事件处理ballContain.onclick = function () {// 获取小球当前的 bottom 值var ballBottom = parseInt(ball.style.bottom || 0);// 计算新的 bottom 值var newBottom = ballBottom + 200; // 向上跳// 检查新位置是否有效if (0 <= newBottom && newBottom <= ballContain.clientHeight) {ball.style.bottom = newBottom + "px";ball.style.transition = "all 0.5s ease";}};// 使用 setInterval() 小球自动下落setInterval(function () {// 获取小球当前的 bottom 值var ballBottom = parseInt(ball.style.bottom || 0);// 计算新的 bottom 值var newBottom = ballBottom - 10; // 向下落// 检查新位置是否有效if (0 <= newBottom && newBottom <= ballContain.clientHeight) {ball.style.bottom = newBottom + "px";} else if (newBottom < 0) { // 如果超出范围，重置到底部ball.style.bottom = '0px';}}, 30);//左键小球位移向左移动document.onkeydown = function (event) {var keyCode = event.keyCode;//这是键盘按下时触发//如果是左键的话修改小球位置// 左键if (keyCode === 37) {var ballLeft = parseInt(ball.style.left || 50);var newLeft = ballLeft - 10;if (newLeft >= 0) {ball.style.left = newLeft + "%";}}}//右键小球向右移动document.onkeyup = function (event) {var keyCode = event.keyCode;//这是键盘弹起时触发//如果是右键的话修改小球位置// 右键if (keyCode === 39) {var ballLeft = parseInt(ball.style.left || 50);var newLeft = ballLeft + 10;if (newLeft <= 100) {ball.style.left = newLeft + "%";}}}</script>
</body>
</html>

2.效果

3.解释

HTML结构:
- 页面有一个标题“使用左右键控制小球移动”。
- 有一个容器#ballContainStyle，里面包含一个小球#ball。
- 还有一段隐藏的背景音乐。
CSS样式:
- 页面设置了背景颜色、居中对齐等基本样式。
- 小球容器是一个300x300像素的白色盒子，有轻微的阴影效果。
- 小球是蓝色的圆形，初始位置在容器底部中央，并且有一个呼吸动画让它周期性地放大缩小。
JavaScript功能:
- 当你点击小球容器时，小球会向上跳起一定距离。
- 每隔30毫秒（即每秒约33次），小球会自动向下落一点，如果它落到容器底部以下，则会重新出现在底部。
- 如果按下左箭头键（键盘上的向左箭头），小球会向左移动一段距离。
- 如果松开右箭头键（键盘上的向右箭头），小球会向右移动一段距离。不过这里有个小错误，通常我们会在按键按下的时候处理移动逻辑，而不是在按键松开的时候。

javaScript操作dom的事件（3个案例+代码+效果图）

目录 1.焦点事件案例:登录表单的验证 1.代码 2.效果 3.解释 2.鼠标事件案例:单击鼠标使小球跳跃 1.代码 2.效果 3.解释 3.键盘事件案例:使用左右键控制小球左右移动 1.代码 2.效果编辑 3.解释 1.焦点事件 focus 当获得焦点时出发(不会冒泡)blur 当失去焦点时出发(不会…...

编程日记 2024/10/8 4:18:09

国庆期间的问题，如何在老家访问杭州办公室的网络呢

背景：国庆期间的问题，如何在老家访问杭州办公室的网络呢实现方案：异地组网实现语言：Java 环境：三个网络，一台拥有公网IP的服务器、一台杭州本地机房内服务器、你老家所在网络中的一台电脑（…...

编程日记 2024/10/8 4:17:07

动态规划算法——三步问题

1.题目解析 2.算法原理本题可以近似看做泰波那契数列，即小孩到第一个台阶需要一步，到第二个台阶则是到第一个台阶的步数加上第一阶到第二阶的步数，同理第三阶就是第二阶的步数加上第二阶到第三阶的步数，由于小孩只能走三步&#…...

编程日记 2024/10/8 4:08:58

【鸿蒙学习】深入解析鸿蒙应用与元服务：含义、区别、应用场景及创建方法

文章目录鸿蒙应用（HarmonyOS App）含义用于干什么优缺点元服务（Atomic Service）含义用于干什么优缺点鸿蒙应用与元服务的区别创建方法鸿蒙应用的创建元服务的创建总结随着科技的不断进步，操作系统也在不断迭代更新…...

编程日记 2024/10/8 4:03:53

React学习01 jsx、组件与组件的三大属性

文章目录 jsx的介绍与语法1.真实DOM和虚拟DOM2.jsx语法模块与模块化，组件与组件化模块与模块化组件与组件化 React组件React事件绑定函数式组件类式组件组件属性state组件属性props组件属性ref 尚硅谷react教程官方文档学习记录笔记01 jsx的介绍与语法 1.真实DOM和…...

编程日记 2024/10/8 4:02:52

项目——超级马里奥——Day(3)

一、游戏开发思路： 1.Frame--->BackGround--->Obstacle---->BufferedImage，人物等 2.BackGround的构造函数： 只要记住窗口里边的每一个场景，只要游戏一开始就已经出现在屏幕里边的，都是在构造函数里边 3.绘…...

编程日记 2024/10/8 3:59:48

测试-BUG篇

文章目录软件测试的生命周期BUGbug的概念描述bug的要素bug级别bug的生命周期与开发产生争执怎么办（高频考题） 软件测试的生命周期软件测试贯穿于软件的整个生命周期 BUG bug的概念是指计算机程序中存在的一个错误(error)、缺陷(flaw)、疏忽(mista…...

编程日记 2024/10/8 3:57:46

vue2中 vue-count-to组件让数字从某个数字动态的显示到某个数字(后附vue3的用法)

1、首先安装 npm install vue-count-to2、使用 2.1、先导入组件 import countTo from ‘vue-count-to’2.2、注册组件 components: { countTo },2.3、使用组件 <countTo> <template><div class"home"><countTo class"count-to&qu…...

编程日记 2024/10/8 3:56:44

AI模型部署初认识

AI部署这个词儿大家肯定不陌生，可能有些小伙伴还不是很清楚这个是干嘛的，但总归是耳熟能详了。近些年来，在深度学习算法已经足够卷卷卷之后，深度学习的另一个偏向于工程的方向–部署工业落地，才开始被谈论的多了起来…...

编程日记 2024/10/8 3:55:43

在线生成论文的网站有哪些？分享5款AI一键原创论文免费网站

一、千笔-AIPasspaper 千笔-AIPasspaper是一款备受推荐的AI写作助手，它集成了多种功能，包括论文大纲生成、内容填充、文献引用和查重修改等。这款工具基于最新的自然语言处理技术，能够帮助用户快速生成高质量的论文内容。 AI论文&#xff0…...

编程日记 2024/10/8 3:53:41

考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)

考研论坛平台小程序目录基于java和微信小程序的考研论坛平台小程序设计与实现一、前言二、系统功能设计三、系统实现四、数据库设计 1、实体ER图五、核心代码六、论文参考七、最新计算机毕设选题推荐八、源码获取： 博主介绍：✌️大厂…...

编程日记 2024/10/8 3:52:40

Pandas 时间序列处理

Pandas 时间序列处理说明： 请回答以下问题，以展示您对 pandas 中时间序列处理的全面理解。请在适用时提供代码示例。问题 1 如何将日期字符串列表 [2023-01-01, 2023-01-02, 2023-01-03] 转换为 pandas 的 DatetimeIndex？ 问题 2 给定一…...

编程日记 2024/10/8 3:50:37

PCL 1.8.1 + VTK 1.8.0 + QT5.14.2+ VS2017 环境搭建

先看看效果： PCL 1.8.1下载安装： Tags PointCloudLibrary/pcl GitHub 安装完成后：如果VTK想重新编译的，可以看我的这篇博客：...

编程日记 2024/10/8 3:48:35

微信小程序和抖音小程序的分享和广告接入代码

开发完成小程序或者小游戏之后，我们为什么要接入分享和广告视频功能，主要原因有以下几个方面。微信小程序和抖音小程序接入分享和广告功能主要基于以下几个原因： 用户获取与增长：分享功能可以帮助用户将小程序内容传播给更多人&…...

编程日记 2024/10/8 3:46:33

中断系统的原理

一、介绍中断是为使单片机具有对外部或内部随机发生的事件实时处理而设置的。中断是指‌CPU在正常运行程序时，由于内部或外部事件的发生，导致CPU中断当前运行的程序，转而去执行其他程序的过程。‌ 中断可以是硬件产生的，也可以是…...

编程日记 2024/10/8 3:45:32

安装Rust

Rust 是一种系统级编程语言，旨在提供高性能和内存安全，同时避免常见的编程错误。由 Mozilla Research 推出，Rust 自推出以来因其独特的设计理念和强大的功能而在开发者社区中迅速获得了广泛的关注和采用。 curl --proto ‘https’ --tlsv1.2…...

编程日记 2024/10/8 3:44:31

vite学习教程05、vite+vue2构建本地 SVG 图标

文章目录前言一、构建本地SVG图标详细步骤1、安装开发依赖2、配置vite2.1、配置vite.config.js2.2、封装vite引入插件脚本解决报错：can not find package fast-glob imported 二、实际应用应用1：未封装，直接vue应用应用2：封装vu…...

编程日记 2024/10/8 3:41:27

机器学习——自监督学习与无监督学习

# 机器学习中的自监督学习与无监督学习在机器学习的世界中，监督学习、无监督学习和自监督学习都是重要的学习方法。本文将聚焦于自监督学习与无监督学习，探讨它们的原理、应用场景以及技术细节，并通过大量代码示例来揭示这些方法的内在工作…...

编程日记 2024/10/8 3:38:24

2003经典绝版100%仿盛大服务端火炬引擎原版

;中国游戏制作本版本为中国游戏制作小组推出的第一个版本，有什么不完美的地方还请大家多多指教！！！ 与盛大逼真！！！ 本版本M2Server采用“梦幻风”以及“冰眼”M2Server修改器修改的 2004/1/…...

编程日记 2024/10/8 3:37:23

银河麒麟服务器：更新软件源

银河麒麟服务器：更新软件源 1、使用场景2、操作步骤3、注意事项 💐The Begin💐点点关注，收藏不迷路💐 1、使用场景当需要安装最新软件或修改软件源配置后，需更新软件源以获取最新软件包信息。 2、操作步…...

编程日记 2024/10/8 3:34:20

字节跳动收购Oladance耳机：强化音频技术，加速VR/AR生态布局

字节跳动收购Oladance耳机：加码VR/AR领域布局近日，字节跳动宣布已完成对开放式耳机品牌Oladance的收购，实现了对该品牌的100%控股。这一收购标志着字节跳动在AI硬件领域的进一步扩展和深化，特别是对其VR/AR领域布局的重要加码。 …...

编程日记 2024/10/8 3:32:18

Android SystemUI组件（11）SystemUIVisibility解读

该系列文章总纲链接：专题分纲目录 Android SystemUI组件本章关键点总结 & 说明： 说明：本章节持续迭代之前章节思维导图，主要关注左侧最上方SystemUiVisibility解读部分即可。本章节主要讲解SystemUiVisibility的概念及其相…...

编程日记 2024/10/8 3:30:16

JSON 全知全解：深入探索 JSON 的奥秘

目录一、JSON 基础认知（一）JSON 的定义与历史（二）JSON 的语法规则（三）JSON 与 JS 对象的关系二、JSON 在不同语言中的用法（一）JavaScript 中的 JSON 操作（二&#xff0…...

编程日记 2024/10/8 3:29:15

CSS | 响应式布局之媒体查询(media-query)详解

media type(媒体类型)是CSS 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。随着移动互联网的发展，m…...

编程日记 2024/10/8 3:28:12

简化版本 class UnionFindSet { public:UnionFindSet(size_t n):_ufs(n, -1){}void Union(int x1, int x2){int root1 FindRoot(x1);int root2 FindRoot(x2);// 如果本身就在一个集合就没必要合并了if (root1 root2)return;// 控制数据量小的往大的集合合并if (abs(_ufs[roo…...

编程日记 2024/10/8 3:27:12

如何高效删除 MySQL 日志表中的历史数据？实战指南

在处理高并发的物联网平台或者其他日志密集型应用时，数据库中的日志表往往会迅速增长，数据量庞大到数百GB甚至更高，严重影响数据库性能。如何有效管理这些庞大的日志数据，特别是在不影响在线业务的情况下，成为了一项技…...

编程日记 2024/10/8 3:24:09

请散户股民看过来，密切关注两件大事

明天股市要开市，不仅散户股民期盼节后股市大涨，上面也同样想在节后来上一个“开门红”。为此，上面没休假，关起门来办了两件大事，这两天发布消息已提前预热了。两件大事如下： 一是，上交所10…...

编程日记 2024/10/8 3:22:07

设计模式之外观模式（Facade）

一、外观模式介绍外观模式( Facade Pattern)，也叫门面模式，是一个 “结构型” 设计模式。外观模式的原始定义是：为子系统中的一组接口提供统一的接口。它定义了一个更高级别的接口，使子系统更易于使用。外观模式，是…...

编程日记 2024/10/8 3:21:06

解锁 Python 嵌套字典的奥秘：高效操作与实战应用指南

文章目录前言🍀一、什么是 Python 字典？1.1 字典的语法 🍀二、字典的基本操作2.1 字典的创建2.2 访问字典中的值2.3 添加或修改键值对2.4 删除字典中的键值对 🍀三、字典的遍历操作3.1 遍历字典的键3.2 遍历字典的值3.3 同时遍…...

编程日记 2024/10/8 3:20:05

联想服务器配置阵列、安装操作系统

文章目录 [toc]1.配置阵列2.制作启动盘3.安装系统 1.配置阵列 1.根据提示进入BIOS设置（F1） 2.系统设置 3.存储 4.第四步可以看到raid卡信息 5.Main Menu 6.Configuration Management 7.Create Virtual Drive 8.Select RAID Level raid5 9.Select Drives…...

编程日记 2024/10/8 3:19:04

1.焦点事件

案例:登录表单的验证

1.代码

2.效果

3.解释

2.鼠标事件

案例:单击鼠标使小球跳跃

1.代码

2.效果

3.解释

3.键盘事件

案例:使用左右键控制小球左右移动

1.代码

2.效果

3.解释

相关文章：