day04--js的综合案例
1.1 商品全选
需求：商品全选
1. 全选 ：点击全选按钮,所有复选框都被选中
2. 全不选 ：点击全不选按钮,所有复选框都被取消选中
3. 反选 ： 点击反选按钮,所有复选框状态取反
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品全选</title>
</head>
<body><button id="btn1">1. 全选</button><button id="btn2">2. 全不选</button><button id="btn3">3. 反选</button><br /><input type="checkbox">电脑<input type="checkbox">手机<input type="checkbox">汽车<input type="checkbox">别墅<input type="checkbox" checked>笔记本
<!--商品全选1. 全选 点击全选按钮,所有复选框都被选中2. 全不选 点击全不选按钮,所有复选框都被取消选中3. 反选 点击反选按钮,所有复选框状态取反-->
</body>
<script>// 1. 全选 点击全选按钮,所有复选框都被选中document.getElementById("btn1").onclick = function(){//获取到所有的复选框, 然后添加一个属性checked=truelet inputs = document.getElementsByTagName("input")for(let item of inputs){item.checked = true} }//2. 全不选 点击全不选按钮,所有复选框都被取消选中document.getElementById("btn2").onclick = function(){//获取到所有的复选框, 然后添加一个属性checked=falselet inputs = document.getElementsByTagName("input")for(let item of inputs){item.checked = false} }//3. 反选 点击反选按钮,所有复选框状态取反document.getElementById("btn3").onclick = function(){//获取到所有的复选框, 然后修改属性checked取反let inputs = document.getElementsByTagName("input")for(let item of inputs){/*if(item.checked){item.checked = false}else{item.checked = true} */item.checked = !item.checked}}
</script>
</html>效果图：
1.2 隔行变色
需求：隔行变色
1. 表格奇偶行颜色不同(表头不参与)
2. 鼠标移入颜色高亮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>隔行变色</title>
</head>
<body><table id="tab1" border="1" width="800" align="center"><tr><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>5</td><td>牛奶制品</td><td>牛奶制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>6</td><td>大豆制品</td><td>大豆制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>7</td><td>海参制品</td><td>海参制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>8</td><td>羊绒制品</td><td>羊绒制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>9</td><td>海洋产品</td><td>海洋产品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>10</td><td>奢侈用品</td><td>奢侈用品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td>11</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
<script>// 1. 表格奇偶行颜色不同(表头不参与)//获取所有的tr(行标签)let trArr = document.getElementsByTagName("tr")//循环所有的tr，排除第一行for (let i = 1; i < trArr.length; i++) {if (i % 2 == 0) {trArr[i].style.backgroundColor = "pink";} else {trArr[i].style.backgroundColor = "orange";}
//2. 鼠标移入颜色变亮//记录原始背景色let oldColor//给每一行添加一个鼠标移入 移除事件trArr[i].onmouseover = function () {oldColor = this.style.backgroundColorthis.style.backgroundColor = "blue"}//鼠标移出颜色恢复trArr[i].onmouseout = function () {this.style.backgroundColor = oldColor}}
</script>
</html>效果图：
1.3 省市级联
需求：省市级联
1. 页面加载完成后自动装载省数据
2. 当选中省时,装载该省的市数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>省市级联</title>
</head>
<body><select id="provinceId" style="width:150px"><option value="">----请-选-择-省----</option><option value="0">北京</option><option value="1">河北</option><option value="2">辽宁</option><option value="3">天津</option></select><select id="cityId" style="width:150px"><option value="">----请-选-择-市----</option><option value="0">顺义区</option><option value="1">昌平区</option><option value="2">朝阳区</option></select><script type="text/javascript">// 准备数据var data = new Array();data[0] = ['顺义区', '昌平区', '朝阳区'];data[1] = ["保定", "石家庄", "廊坊"];data[2] = ["沈阳", "铁岭", "抚顺"];data[3] = ["滨海新区", "宝坻区", "南开区"];
let provinceSelect = document.getElementById("provinceId");//获取省下拉列表let citySelect = document.getElementById("cityId");//获取市下拉列表//1.给select绑定一个onchange事件，当选项发生变化时，执行方法provinceSelect.onchange = function(){//2.修改citySelect中所有的option选项//2.1根据所选的省份的value，获取此省份下的所有地级市或地区let citys = data[this.value]//循环所有地级市或地区，拼接optionlet ops = "<option>----请-选-择-市----</option>"for(let i=0;i<citys.length;i++){ops += "<option>"+citys[i]+"</option>"}//2.3将所有option替换到cityId的select下citySelect.innerHTML = ops}</script>
</body>
</html>效果图：
1.4 年会抽奖
需求: 页面刷新,随机抽取一二三等奖,要求获奖人不能重复
<!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>年会抽奖</title><style>.wrapper {width: 840px;height: 420px;background: url(../images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}
.wrapper span {color: #b10e0d;}</style>
</head>
<body><div class="wrapper"><h1>年会抽奖</h1><h2>一等奖：<span id="one">待开奖</span></h2><h3>二等奖：<span id="two">待开奖</span></h3><h4>三等奖：<span id="three">待开奖</span></h4></div><script>// 需求: 页面刷新,随机抽取一二三等奖,要求获奖人不能重复const arr = ['波本', '琴酒', '基尔', '伏特加', '白兰地', '爱尔兰']/* 方法1：//从arr中随机获取一个let num1 = Math.floor(Math.random()*arr.length);let name = arr[num1];//将内容填写到span中document.getElementById("one").innerHTML=name//从数组中删除arr.splice(num1,1)//2.生成二等奖//从arr中随机获取一个let num2 = Math.floor(Math.random()*arr.length);name = arr[num2];//将内容填写到span中document.getElementById("two").innerHTML=name//从数组中删除arr.splice(num2,1)//3.生成三等奖//从arr中随机获取一个let num3 = Math.floor(Math.random()*arr.length);name = arr[num3];//将内容填写到span中document.getElementById("three").innerHTML=name//从数组中删除arr.splice(num3,1) *///方法2：简便方法//生成一等奖huoj("one")//生成一等奖huoj("two")//生成一等奖huoj("three")function huoj(id){//从arr中随机获取一个let num = Math.floor(Math.random()*arr.length);let name = arr[num];//将内容填写到span中document.getElementById(id).innerHTML=name//从数组中删除arr.splice(num,1) }</script>
</body>
</html>
1.5 轮播图
需求：轮播图: 一共5张图片，实现每过2秒中切换一张图片的效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><style>div {text-align: center;}</style>
</head>
<body><div><img id="myImg" src="../images/L1.jpg" width="500px"></div><script>//定义一个索引，默认为1let i=1let si = setInterval(function(){if(i>5){i = 1;//图片复位}//更换照片路径document.getElementById("myImg").src="../images/L"+i+".jpg";//图片变更i++;},2000)</script>
</body>
</html>相关文章：
day04--js的综合案例
1.1 商品全选 需求：商品全选 1. 全选 ：点击全选按钮,所有复选框都被选中 2. 全不选 ：点击全不选按钮,所有复选框都被取消选中 3. 反选 ： 点击反选按钮,所有复选框状态取反 <!DOCTYPE html> <html lang"en">…...
【产品经理】定价策略
年初的时候，尝试自己独立运营了一个美团店铺，最终没有继续做下去了，原因是利润率太低，平台和骑手把利润拿走太多了，根本没有钱赚，烧钱搞流量更是深不见底。 不过也学到了很多东西，比如选品策略…...
webrtc学习笔记3
Nodejs实战 对于我们WebRTC项目而言，nodejs主要是实现信令服务器的功能，客户端和服务器端的交互我们选择websocket作为通信协议，所以以websocket的使用为主。 web客户端 websocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行…...
Transformer架构；Encoder-Decoder；Padding Mask；Sequence Mask；
目录 Transformer架构 Transformer架构的主要组成部分： 简单举例说明输入和输出： Encoder-Decoder 编码器/解码器组成 6、位置前馈网络（Position-wise Feed-Forward Networks） 7、残差连接和层归一化 10、掩码Mask 10.1 Padding Mask 10.2 Sequence Mask 为什么…...
【leetcode详解】特殊数组II : 一题代表了一类问题(前缀和思想)
前缀和的优势 给定一个数组，前缀和的特点在于，任意给出一对始末位置，能够用O(1)的时间复杂度得到始末位置之间所有元素的某种关系。 题型分析 这道题目正是“给出始末位置，检测其中元素特点”那一类，那我们就想&#…...
SQL每日一练-0814
今日SQL题难度：🌟☆☆☆☆☆☆☆☆☆ 1、题目要求 找出每个部门中薪资最高的员工显示部门ID、部门名称、员工ID、员工姓名以及对应的薪资 2、表和虚拟数据 现有两个表：Employees 和 Departments，记录了员工和部门信息。…...
Android持久化技术—文件存储
Android持久化技术—文件存储 文件存储是Android中最基本的一种数据存储方式，它不对存储的内容进行任何的格式化处理，所有数据都是原封不动地保存到文件当中的，因而它比较适合用于存储一些简单的文本数据或二进制数据。如果你想使用文件存储…...
动手学深度学习（pytorch）学习记录12-激活函数[学习记录]
激活函数 激活函数（activation function）通过计算加权和并加上偏置来确定神经元是否应该被激活， 它们将输入信号转换为输出的可微运算。 import torch import matplotlib.pyplot as plt 简单定义一个画图的函数 def graph_drawing(x_,y_…...
微服务实战系列之玩转Docker（十）
前言 我们知道Docker的“使命”是为了快速完成应用的迁移和部署。为提升它的战斗能力，Docker官方携手发布了Docker Swarm—— 一个快速完成Docker集群构建的利器。那么请先回忆一下本系列第八篇（重点compose）和第九篇（重点networ…...
Mysql(四)---增删查改(进阶)
文章目录 前言1.查询操作1.1.全列查询1.2.指定列查询1.3.列名为表达式查询1.4.查询中使用别名1.5.去重查询1.6.排序1.6.2.NULL 1.7.条件查询1.8.分页查询 2.修改3.删除 前言 上一篇博客，我们学习了一些主键的概念，并且分别创造了一些示例表，…...
SOAP @WebService WSDL
SOAP & WebService & WSDL SOAP（Simple Object Access Protocol）WebService（Web服务）WSDL（Web Services Description Language） SOAP（Simple Object Access Protocol） **是一…...
【Qt】QWidget的toolTip属性
QWidget的toolTip属性 如果一个GUI程序，界面比较复杂，按钮比较多，使用toolTip可以设置当鼠标悬停在控件上的时候，可以弹出一个提示。 API说明 setToolTip 设置 toolTip. ⿏标悬停在该 widget 上时会有提⽰说明. setToolTipDur…...
【操作系统】什么是进程？什么是线程？两者有什么区别（面试常考！！！）
什么是进程/任务（Process/Task） 当我们打开我们的电脑的任务管理器就可以看到我们的电脑正在执行的进程。 每个应用程序运行于现代操作系统之上时，操作系统会提供一种抽象，好像系统上只有这个程序在运行，所有的硬件资…...
AI -- Machine Learning
1. What is Machine Learning 1.1 Artificial Intelligence vs. Machine Learning 1.2 Relations to Other Disciplines 与其他学科的关系 1.3 Human Learning vs. Machine Learning 1.4 What is Skill in Machine Learning 什么是机器学习的技能 1.5 Two General Types of Le…...
了解交换机_1.交换机的技术发展
1.LAN的分段-单网线 最简单的网络是两台计算机通过一根网线相连： 一根网线它有很多限制，首先只能连接两台电脑，其次不能距离太远，主要因为： （1）单路网线太长会存在信号衰减；…...
ubuntu 24.04 安装 Nvidia 显卡驱动 + CUDA + cuDNN，配置 AI 深度学习训练环境，简单易懂，一看就会！
ubuntu 24.04 安装 Nvidia 显卡驱动 CUDA cuDNN，配置 AI 深度学习训练环境，简单易懂，一看就会！ 1.查看本机显卡型号 lspci | grep -i nvidia输出如下： 01:00.0 3D controller: NVIDIA Corporation GM108M [GeForc…...
跟李沐学AI：目标检测的常用算法
区域神经网络R-CNN 使用启发式搜索算法来选择锚框 -> 使用预训练模型来对每个锚框抽取特征 -> 训练一个SVM对类别进行分类 -> 训练一个线性回归模型来预测边缘框偏移 锚框大小不一，如何将不同的锚框统一为一个batch? -> 兴趣区域池化层 兴趣区域(RoI…...
基于UE5和ROS2的激光雷达+深度RGBD相机小车的仿真指南(一)---UnrealCV获取深度+分割图像
前言 本系列教程旨在使用UE5配置一个具备激光雷达深度摄像机的仿真小车，并使用通过跨平台的方式进行ROS2和UE5仿真的通讯，达到小车自主导航的目的。本教程使用的环境： ubuntu 22.04 ros2 humblewindows11 UE5.4.3python8 本系列教程将涉及以…...
Java算法解析一：二分算法及其衍生出来的问题
这个算法的前提是，数组是升序排列的 算法描述： i和j是指针可以表示查找范围 m为中间值 当目标值targat比m大时，设置查找范围在m右边：i m-1 当目标值targat比m小时，设置查找范围在m左边：j m1 当targat的…...
数学建模预测类—【一元线性回归】
每日格言：行动是治愈恐惧的良药，而犹豫拖延将不断滋养恐惧. 目录 前言 一、什么是回归分析？ 1.概念理解 2.分类和一般步骤 二、一元线性回归（Matlab算法） 1.利用regress函数 2、例题讲解 总结 前言 在具体讲述线性回归…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。 原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...