网页设计--第5次课后作业
1、快速学习JavaScript的基本知识第11-14章
JavaScript入门 - 绿叶学习网
2、使用所学的知识完成以下练习。
1）点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡
2）输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
3） 点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消，勾选的状态。
效果如图所示：
附源代码（先尽量自己做，然后再参考。）
<!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>JS-事件-案例</title>
</head>
<body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" onclick="on()"> <input type="button" value="熄灭" onclick="off()"><br> <br><input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"></body><script>//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/on.gif";}function off(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/off.gif";}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为小写input.value = input.value.toLowerCase();}function upper(){//大写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为大写input.value = input.value.toUpperCase();}//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置未选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = false;}}</script>
</html>相关文章：
网页设计--第5次课后作业
1、快速学习JavaScript的基本知识第11-14章 JavaScript入门 - 绿叶学习网 2、使用所学的知识完成以下练习。 1）点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡 2）输入框鼠标聚焦后，展示小写；鼠标离焦后…...
Spring Cache框架，实现了基于注解的缓存功能。
个人简介：Java领域新星创作者；阿里云技术博主、星级博主、专家博主；正在Java学习的路上摸爬滚打，记录学习的过程~ 个人主页：.29.的博客 学习社区：进去逛一逛~ Spring Cache框架 简介Spring Cache 环境准备S…...
CSS-鼠标属性篇
属性名：cursor 功能：设置鼠标光标的样式 属性值： pointer：小手move：移动图标text：文字选择器crosshair：十字架wait：等待help：帮助 eg.html{ cursor: wait;}(此处使用css改…...
Fiddler弱网测试究竟该怎么做？
前言 使用Fiddler对手机App应用进行抓包，可以对App接口进行测试，也可以了解App传输中流量使用及请求响应情况，从而测试数据传输过程中流量使用的是否合理。 抓包过程： 1、Fiddler设置 1）启动Fiddler->Tools->…...
蓝桥杯-平方和（599）
【题目】平方和 【通过测试】代码 import java.util.Scanner; import java.util.ArrayList; import java.util.List; // 1:无需package // 2: 类名必须Main, 不可修改public class Main {public static void main(String[] args) {Scanner scan new Scanner(System.in);//在此…...
从零构建属于自己的GPT系列1：预处理模块(逐行代码解读)、文本tokenizer化
1 训练数据 在本任务的训练数据中，我选择了金庸的15本小说，全部都是txt文件 数据打开后的样子 数据预处理需要做的事情就是使用huggingface的transformers包的tokenizer模块，将文本转化为token 最后生成的文件就是train_novel.pkl文件&a…...
STM32内存介绍
ROM是一种只读存储器，经历了从NOR Flash到NAND Flash再到现在的eMMC的发展。为了便于使用和大批量生产，ROM进一步分为了4种类型：PROM、EPROM、EEPROM和Flash。PROM只能被编程一次，EPROM可擦写可编程且可达1000次，EEPRO…...
Qt::Window 、Qt::Tool是 Qt 框架中的一个窗口标志（Window Flag），用于指定窗口的类型和行为
Qt::Window Qt::Window 是 Qt 框架中的一个窗口标志（Window Flag），用于指定窗口的类型和行为。 在 Qt 中，窗口标志用于控制窗口的外观、行为和交互方式。通过使用不同的窗口标志组合，可以定制窗口的特性，…...
东胜物流软件 SQL注入漏洞复现
0x01 产品简介 东胜物流软件是一款致力于为客户提供IT支撑的 SOP， 帮助客户大幅提高工作效率，降低各个环节潜在风险的物流软件。 0x02 漏洞概述 东胜物流软件 TCodeVoynoAdapter.aspx、/TruckMng/MsWlDriver/GetDataList、/MvcShipping/MsBaseInfo/Sav…...
第1章 爬虫基础
目录 1. HTTP 基本原理1.1 URI 和 URL1.2 HTTP 和 HTTPS1.3 请求1.3.1 请求方法1.3.2 请求的网址1.3.3 请求头1.3.4 请求体 1.4 响应1.4.1 响应状态码1.4.2 响应头1.4.3 响应体 2. Web 网页基础2.1 网页的组成2.1.1 HTML2.1.2 CSS2.1.3 JavaScript 2.2 网页的结构2.3 节点树及节…...
Python教程---序列--序列修改元素
下面和大家讲一下如何进行序列修改元素。 序列修改元素可以进行两个操作。如下: 方法1:通过下标元素来修改 方法2:通过del来删除元素 # 创建一个原始的列表 stus [张三,李四,王五,赵六,王麻子,小红]#通过下标来直接修改元素中的内容 stus[0] 张三123 stus[2] 哈哈#通过d…...
Linux 中的 ls 命令使用教程
目录 前言 如何运用 ls 命令 1、列出带有所有权的文件和目录 2、获取以人类可读的方式显示的信息 3、列出隐藏文件 4、递归列出文件 5、在使用 ls 时对文件和目录做区分 6、列出指定扩展名的文件 7、基于大小对输出内容排序 8、根据日期和时间排序文件 让我们来总结…...
Kubernetes基础入门：Kubernetes的有关概述
Kubernetes基础入门：Kubernetes的有关概述 一、摘要二、为什么需要 Kubernetes？三、Kubernetes 的功能架构 💖The Begin💖点点关注，收藏不迷路💖 一、摘要 随着云计算和容器技术的快速发展，现代…...
C# 无法将“int[]“类型隐式转换为“int?[]“，无法将“string[]“类型隐式转换为“string?[]“
在 C# 中，不能将 int[] 隐式转换为 int?[]，因为它们是两种不同的类型。int[] 是一个整数数组，而 int?[] 是一个可空整数数组。要解决这个问题，你可以使用显式转换或创建一个新的可空整数数组。 两种解决方案供大家选择 // 示例…...
趣链科技,HyperChain
目录 趣链科技 HyperChain 产品介绍 CA认证即电子认证服务 趣链科技 趣链区块链平台Hyperchain-核心产品-趣链科技 趣链科技飞洛区块链服务开放平台...
吴恩达《机器学习》9-7-9-8:综合起来、自主驾驶
在神经网络的使用过程中，需要经历一系列步骤，从网络结构的选择到训练过程的实施。以下是使用神经网络时的主要步骤的小结： 一、网络结构的选择 输入层： 第一步是选择网络结构，即确定神经网络的层数以及每层的单元数。…...
HTTP/HTTPS
HTTP/HTTPS 简介 HTTP 协议是 Hyper Text Transfer Protocol（超文本传输协议）的缩写，是用于从万维网（ WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。 HTTP 是一个基于 TCP/IP 通信协议来传递数据&a…...
C语言中#ifndef的头文件保护用法和宏定义用法
文章目录 头文件保护宏定义 #ifndef MY_HEADER_H #define MY_HEADER_H// 这里放置头文件的内容#endif // MY_HEADER_H#ifndef _error#define _error (-1) #endif这两个代码块分别用于不同的目的。 头文件保护 #ifndef MY_HEADER_H #define MY_HEADER_H// 这里放置头文件的内…...
141.【Git版本控制-本地仓库-远程仓库-IDEA开发工具全解版】
Git-深入挖掘 (一)、Git分布式版本控制工具1.目标2.概述(1).开发中的实际常见(2).版本控制器的方式(3).SVN (集中版本控制器)(4).Git (分布版本控制器)(5).Git工作流程图 (二)、Git安装与常用命令1.Git环境配置(1).安装Git的操作(2).Git的配置操作(3).为常用的指令配置别名 (可…...
OpenCV快速入门：移动物体检测和目标跟踪
文章目录 前言一、移动物体检测和目标跟踪简介1.1 移动物体检测的基本概念1.2 移动物体检测算法的类型1.3 目标跟踪的基本概念1.4 目标跟踪算法的类型 二、差值法检测移动物体2.1 差值法原理2.2 差值法公式2.3 代码实现2.3.1 视频或摄像头检测移动物体2.3.2 随机动画生成的移动…...
（十）学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型（Vision-Language Models, VLMs），为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展，机器人仍难以胜任复杂的长时程任务（如家具装配），主要受限于人…...
CppCon 2015 学习:Time Programming Fundamentals
Civil Time 公历时间 特点： 共 6 个字段： Year（年）Month（月）Day（日）Hour（小时）Minute（分钟）Second（秒） 表示…...
AWS vs 阿里云：功能、服务与性能对比指南
在云计算领域，Amazon Web Services (AWS) 和阿里云 (Alibaba Cloud) 是全球领先的提供商，各自在功能范围、服务生态系统、性能表现和适用场景上具有独特优势。基于提供的引用[1]-[5]，我将从功能、服务和性能三个方面进行结构化对比分析&#…...
【threejs】每天一个小案例讲解：创建基本的3D场景
代码仓 GitHub - TiffanyHoo/three_practices: Learning three.js together! 可自行clone，无需安装依赖，直接liver-server运行/直接打开chapter01中的html文件 运行效果图 知识要点 核心三要素 场景（Scene） 使用 THREE.Scene(…...
Electron简介（附电子书学习资料）
一、什么是Electron？ Electron 是一个由 GitHub 开发的 开源框架，允许开发者使用 Web技术（HTML、CSS、JavaScript） 构建跨平台的桌面应用程序（Windows、macOS、Linux）。它将 Chromium浏览器内核 和 Node.j…...