网页设计--第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 随机动画生成的移动…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...
uniapp手机号一键登录保姆级教程（包含前端和后端）
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时，性能会显著下降。以下是优化思路和简易实现方法： 一、核心优化思路 减少 JOIN 数量 数据冗余：添加必要的冗余字段（如订单表直接存储用户名）合并表：将频繁关联的小表合并成…...
前端调试HTTP状态码
1xx（信息类状态码） 这类状态码表示临时响应，需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分，客户端应继续发送剩余部分。 2xx（成功类状态码） 表示请求已成功被服务器接收、理解并处…...
【版本控制】GitHub Desktop 入门教程与开源协作全流程解析
目录 0 引言1 GitHub Desktop 入门教程1.1 安装与基础配置1.2 核心功能使用指南仓库管理日常开发流程分支管理 2 GitHub 开源协作流程详解2.1 Fork & Pull Request 模型2.2 完整协作流程步骤步骤 1: Fork（创建个人副本）步骤 2: Clone（克隆…...
深入理解 C++ 左值右值、std::move 与函数重载中的参数传递
在 C 编程中，左值和右值的概念以及std::move的使用，常常让开发者感到困惑。特别是在函数重载场景下，如何合理利用这些特性来优化代码性能、确保语义正确，更是一个值得深入探讨的话题。 在开始之前，先提出几个问题&…...
Qt学习及使用_第1部分_认识Qt---Qt开发基本流程
前言 学以致用,通过QT框架的学习,一边实践,一边探索编程的方方面面. 参考书:<Qt 6 C开发指南>(以下称"本书") 标识说明:概念用粗体倾斜.重点内容用(加粗黑体)---重点内容(红字)---重点内容(加粗红字), 本书原话内容用深蓝色标识,比较重要的内容用加粗倾…...
[electron]预脚本不显示内联script
script-src self 是 Content Security Policy (CSP) 中的一个指令，它的作用是限制加载和执行 JavaScript 脚本的来源。 具体来说： self 表示 当前源。也就是说，只有来自当前网站或者当前页面所在域名的 JavaScript 脚本才被允许执行。"…...
分享今天做的力扣SQL题
其实做之前就打算分享的，但是做完又不想分享了。。。结果没几分钟，还是，写一下吧。我就当各位是监督我的。 说一下，这是第一天做SQL题，虽然我也是软件工程专业，但是学的本来就不好，又忘了个差不…...