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

网页设计--第5次课后作业

news 2026/2/10 2:32:38

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&#xff09;点击 “点亮”按钮 点亮灯泡&#xff0c;点击“熄灭”按钮 熄灭灯泡 2&#xff09;输入框鼠标聚焦后&#xff0c;展示小写&#xff1b;鼠标离焦后…...

编程日记 2023/11/28 5:25:08

Spring Cache框架，实现了基于注解的缓存功能。

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ Spring Cache框架 简介Spring Cache 环境准备S…...

编程日记 2023/11/28 5:24:05

CSS-鼠标属性篇

属性名&#xff1a;cursor 功能&#xff1a;设置鼠标光标的样式 属性值&#xff1a; pointer&#xff1a;小手move&#xff1a;移动图标text&#xff1a;文字选择器crosshair&#xff1a;十字架wait&#xff1a;等待help&#xff1a;帮助 eg.html{ cursor: wait;}(此处使用css改…...

编程日记 2023/11/28 5:23:03

Fiddler弱网测试究竟该怎么做？

前言 使用Fiddler对手机App应用进行抓包&#xff0c;可以对App接口进行测试&#xff0c;也可以了解App传输中流量使用及请求响应情况&#xff0c;从而测试数据传输过程中流量使用的是否合理。 抓包过程&#xff1a; 1、Fiddler设置 1&#xff09;启动Fiddler->Tools->…...

编程日记 2023/11/28 5:22:02

蓝桥杯-平方和（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);//在此…...

编程日记 2023/11/28 5:19:56

从零构建属于自己的GPT系列1：预处理模块(逐行代码解读)、文本tokenizer化

1 训练数据 在本任务的训练数据中&#xff0c;我选择了金庸的15本小说&#xff0c;全部都是txt文件 数据打开后的样子 数据预处理需要做的事情就是使用huggingface的transformers包的tokenizer模块&#xff0c;将文本转化为token 最后生成的文件就是train_novel.pkl文件&a…...

编程日记 2023/11/28 5:18:54

STM32内存介绍

ROM是一种只读存储器&#xff0c;经历了从NOR Flash到NAND Flash再到现在的eMMC的发展。为了便于使用和大批量生产&#xff0c;ROM进一步分为了4种类型&#xff1a;PROM、EPROM、EEPROM和Flash。PROM只能被编程一次&#xff0c;EPROM可擦写可编程且可达1000次&#xff0c;EEPRO…...

编程日记 2023/11/28 5:17:53

Qt::Window 、Qt::Tool是 Qt 框架中的一个窗口标志（Window Flag），用于指定窗口的类型和行为

Qt::Window Qt::Window 是 Qt 框架中的一个窗口标志&#xff08;Window Flag&#xff09;&#xff0c;用于指定窗口的类型和行为。 在 Qt 中&#xff0c;窗口标志用于控制窗口的外观、行为和交互方式。通过使用不同的窗口标志组合&#xff0c;可以定制窗口的特性&#xff0c;…...

编程日记 2023/11/28 5:16:52

东胜物流软件 SQL注入漏洞复现

0x01 产品简介 东胜物流软件是一款致力于为客户提供IT支撑的 SOP&#xff0c; 帮助客户大幅提高工作效率&#xff0c;降低各个环节潜在风险的物流软件。 0x02 漏洞概述 东胜物流软件 TCodeVoynoAdapter.aspx、/TruckMng/MsWlDriver/GetDataList、/MvcShipping/MsBaseInfo/Sav…...

编程日记 2023/11/28 5:15:51

第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 节点树及节…...

编程日记 2023/11/28 5:14:50

Python教程---序列--序列修改元素

下面和大家讲一下如何进行序列修改元素。 序列修改元素可以进行两个操作。如下: 方法1:通过下标元素来修改 方法2:通过del来删除元素 # 创建一个原始的列表 stus [张三,李四,王五,赵六,王麻子,小红]#通过下标来直接修改元素中的内容 stus[0] 张三123 stus[2] 哈哈#通过d…...

编程日记 2023/11/28 5:13:49

Linux 中的 ls 命令使用教程

目录 前言 如何运用 ls 命令 1、列出带有所有权的文件和目录 2、获取以人类可读的方式显示的信息 3、列出隐藏文件 4、递归列出文件 5、在使用 ls 时对文件和目录做区分 6、列出指定扩展名的文件 7、基于大小对输出内容排序 8、根据日期和时间排序文件 让我们来总结…...

编程日记 2023/11/28 5:12:48

Kubernetes基础入门：Kubernetes的有关概述

Kubernetes基础入门&#xff1a;Kubernetes的有关概述 一、摘要二、为什么需要 Kubernetes&#xff1f;三、Kubernetes 的功能架构 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 一、摘要 随着云计算和容器技术的快速发展&#xff0c;现代…...

编程日记 2023/11/28 5:11:48

C# 无法将“int[]“类型隐式转换为“int?[]“，无法将“string[]“类型隐式转换为“string?[]“

在 C# 中&#xff0c;不能将 int[] 隐式转换为 int?[]&#xff0c;因为它们是两种不同的类型。int[] 是一个整数数组&#xff0c;而 int?[] 是一个可空整数数组。要解决这个问题&#xff0c;你可以使用显式转换或创建一个新的可空整数数组。 两种解决方案供大家选择 // 示例…...

编程日记 2023/11/28 5:10:47

趣链科技,HyperChain

目录 趣链科技 HyperChain 产品介绍 CA认证即电子认证服务 趣链科技 趣链区块链平台Hyperchain-核心产品-趣链科技 趣链科技飞洛区块链服务开放平台...

编程日记 2023/11/28 5:09:46

吴恩达《机器学习》9-7-9-8:综合起来、自主驾驶

在神经网络的使用过程中&#xff0c;需要经历一系列步骤&#xff0c;从网络结构的选择到训练过程的实施。以下是使用神经网络时的主要步骤的小结&#xff1a; 一、网络结构的选择 输入层&#xff1a; 第一步是选择网络结构&#xff0c;即确定神经网络的层数以及每层的单元数。…...

编程日记 2023/11/28 5:07:43

HTTP/HTTPS

HTTP/HTTPS 简介 HTTP 协议是 Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写&#xff0c;是用于从万维网&#xff08; WWW:World Wide Web &#xff09;服务器传输超文本到本地浏览器的传送协议。 HTTP 是一个基于 TCP/IP 通信协议来传递数据&a…...

编程日记 2023/11/28 5:05:40

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// 这里放置头文件的内…...

编程日记 2023/11/28 5:03:37

141.【Git版本控制-本地仓库-远程仓库-IDEA开发工具全解版】

Git-深入挖掘 (一)、Git分布式版本控制工具1.目标2.概述(1).开发中的实际常见(2).版本控制器的方式(3).SVN (集中版本控制器)(4).Git (分布版本控制器)(5).Git工作流程图 (二)、Git安装与常用命令1.Git环境配置(1).安装Git的操作(2).Git的配置操作(3).为常用的指令配置别名 (可…...

编程日记 2023/11/28 5:01:35

OpenCV快速入门：移动物体检测和目标跟踪

文章目录 前言一、移动物体检测和目标跟踪简介1.1 移动物体检测的基本概念1.2 移动物体检测算法的类型1.3 目标跟踪的基本概念1.4 目标跟踪算法的类型 二、差值法检测移动物体2.1 差值法原理2.2 差值法公式2.3 代码实现2.3.1 视频或摄像头检测移动物体2.3.2 随机动画生成的移动…...

编程日记 2023/11/28 5:00:34

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2026/1/23 4:56:05

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/9 6:43:47

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/31 9:18:40