web APIs-练习一
轮播图点击切换：
<!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>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')let i = 0setInterval(function () {i++if (i >= sliderData.length) {i = 0}img.src = sliderData[i].urlp.innerHTML = sliderData[i].title//排他思想document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}, 1000)</script>
</body></html>运行结果：
随机抽奖素材：
<!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;margin: 10px auto;}</style>
</head><body><div class="wrapper"><strong>传智教育年会抽奖</strong><h1>一等奖：<span id="one">???</span></h1><h3>二等奖：<span id="two">???</span></h3><h5>三等奖：<span id="three">???</span></h5></div><script>const personArr = ['张三', '李四', '王五', '赵六', '周七', '钱八']// 第一名const random1 = Math.floor(Math.random() * personArr.length)const one = document.querySelector('#one')one.innerHTML = personArr[random1]personArr.splice(random1, 1)// 第二名const random2 = Math.floor(Math.random() * personArr.length)const two = document.querySelector('#two')two.innerHTML = personArr[random2]personArr.splice(random2, 1)// 第三名const random3 = Math.floor(Math.random() * personArr.length)const three = document.querySelector('#three')three.innerHTML = personArr[random3]personArr.splice(random3, 1)</script>
</body></html>运行效果：
网页时钟（图形版）：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>练习 - 网页时钟</title><style>* {box-sizing: border-box;}.clock {width: 600px;height: 600px;background: url(./images/clock.jpg) no-repeat;margin: 50px auto 0;position: relative;}.hh,.mm,.ss {position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: url(./images/hour.png) no-repeat center;}.mm {background-image: url(./images/minute.png);transform: rotate(270deg);}.ss {background-image: url(./images/second.png);transform: rotate(0deg);}</style>
</head><body><div class="clock"><div class="hh" id="h"></div><div class="mm" id="m"></div><div class="ss" id="s"></div></div><script>// 秒针const second = document.querySelector('.ss')let du = 0setInterval(function () {du += 6if (du >= 360) {du = 0}second.style.transform = `rotate(${du}deg)`}, 1000)// 分针const second1 = document.querySelector('.mm')let du1 = 270setInterval(function () {du1 += 6if (du1 >= 360) {du1 = 0}second1.style.transform = `rotate(${du1}deg)`}, 60000)// 时针const second2 = document.querySelector('.hh')let du2 = 0setInterval(function () {du2 += 6if (du2 >= 360) {du2 = 0}second2.style.transform = `rotate(${du2}deg)`}, 3600000)</script>
</body></html>运行结果：
用户注册倒计时：
<!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><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(5)</button><script>const btn = document.querySelector('.btn')let i = 5let n = setInterval(function () {i--btn.innerHTML = `我已经阅读用户协议(${i})`if (i === 0) {clearInterval(n)btn.innerHTML = '同意'btn.disabled = false}}, 1000)</script>
</body></html>运行结果：
相关文章：
web APIs-练习一
轮播图点击切换： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"…...
AX88179A千兆网卡芯片，支持switch联网
AX88179是世界上第一个USB 3.0，千兆以太网控制器，它在单一芯片上集成了USB 3.0 PHY和10/100/1000Mbps千兆以太网MAC / PHY。AX88179是最新此外ASIX的USB-到-LAN产品组合，提供一个小的形式因素的解决方案和插头-和-打法可用性，使嵌…...
Pytorch个人学习记录总结 05
目录 神经网络的基本骨架 卷积操作 torch.nn.functional.conv2d 神经网络的基本骨架 搭建Neural Network骨架主要用到的包是torch.nn，官方文档网址：torch.nn — PyTorch 2.0 documentation，其中torch.nn.Module很重要，是所有所…...
windows部署安装redis安装教程
1、下载redishttps://github.com/tporadowski/redis/releases 2、下载完然后双击安装 比较简单 略过 3、测试是否安装成功 提示bug Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf …...
Jmeter post请求传参问题
同线程组引用参数 新增数据bizId，然后将此次新增数据删除 添加新增数据接口，然后查询数据列表，正则表达式提取bizId 在删除接口引用此值${bizId} 添加断言，执行查看结果 json格式的post请求 摘要：正在执行的活动内容…...
对Windows应用程序进行代码签名
Windows上发布桌面应用程序，您可以看到带有“发布者：未知”的未正确签名的应用程序。 没有被签名的软件 因此，这里有一个有关经验教训的快速指南，可能会帮助您从一开始就正确签署安装程序。请注意，这些说明适用于对已…...
2022 China Open Source Report
| 翻译：黄绍雅、岳扬、刘文涛、李思颖 | 编辑：胡欣元 | 设计：胡欣元 As 2022 finally came to an end, we also emerged from the challenging years of the three-year-long COVID pandemic. The new edition of the "China Open Sourc…...
postgresql|数据库|启动数据库时报错：FATAL: could not map anonymous shared memory的解决
前言： 一个很偶然的出现的问题，因为我需要验证备份文件是否正确，因此，我在一台已启动了一个数据库实例的服务器上，依据全备的数据库文件在启动一个实例，当然，在此之前，已经修改了备…...
数字签名与数字证书
数字签名与数字证书 数字签名数字证书数字证书的原理数字证书的特点 如何验证证书机构的公钥不是伪造的 数字签名 数字签名是非对称密钥加密技术与数字摘要技术的应用，数字签名就是用加密算法加密报文文本的摘要（摘要通过hash函数得到）而生成…...
基于Jquery EasyUI JSZip FileSaver的简单使用
一、前言 在前端的项目开发中 ，下载文件压缩包是很重要的一个环节，那么怎么下载多个文件并压缩成ZIP下载呢？ 二、使用步骤 1、引用库 <script type"text/javascript" src"~/Scripts/comm/jszip.min.js" ></…...
git远程一个分支对应本地两个分支推送
git远程一个分支对应本地两个分支推送 你可以使用以下命令将两个本地分支推送到远程仓库中的一个远程分支： 首先，将第一个本地分支推送到远程仓库： git push <远程仓库名称> <本地分支名称>:<远程分支名称>例如ÿ…...
SpringCloud学习—Hystrix：服务熔断
分布式系统面临的问题: 复杂分布式结构中的应用程序有数十个依赖关系，每个依赖关系在某些时候将不可避免的失效. 服务雪崩 多个微服务之间调用的时候，假设微服务A调用微服务B和微服务C,微服务B和微服务C又调用其他的微服务，这就是所谓的“扇…...
8款常用系统镜像烧录软件
系统烧录软件是一种用于将操作系统或其他软件程序安装到嵌入式系统、嵌入式设备或存储设备中的工具。它通常用于将预先编译好的二进制文件或源代码烧录到硬件设备的非易失性存储器中，例如闪存芯片、EEPROM、EPROM或其他存储介质。系统烧录软件提供了一个便捷的方式&…...
设计模式什么情况下适合使用呢？
很多情况下设计模式是一种经过验证的解决特定问题的最佳实践。设计模式提供了一种标准化的方式来解决常见的软件设计问题，并提供了一种可重用的解决方案。设计模式可以帮助开发人员编写具有高可维护性、可扩展性和可重用性的代码。 设计模式适用于以下情况…...
Docker和K8s区别，使用场景，具体怎么使用以及详细命令
目录 一、Docker 和 Kubernetes 的区别二、Docker 的使用场景三、Kubernetes 的使用场景四、Docker 的具体使用方法五、Kubernetes 的具体使用方法 Docker 和 Kubernetes(简称 K8s) 都是容器技术领域中非常重要的工具，但它们在构建、部署和管理容器化应用程序方面发…...
K8S集群创建和管理，以及常用命令
目录 1. 安装 K8s 集群2. 创建 K8s 集群3. 管理 K8s 集群4. 维护 K8s 集群 K8s 集群 (Kubernetes Cluster) 是一个由多个节点组成的容器编排平台，它提供了一种简单、可靠、可扩展的方式来部署、管理和监控容器化应用程序。K8s 集群通常由一个或多个 Master 节点和一…...
HarmonyOS/OpenHarmony元服务开发-卡片使用动效能力
ArkTS卡片开放了使用动画效果的能力，支持显式动画、属性动画、组件内转场能力。需要注意的是，ArkTS卡片使用动画效果时具有以下限制： 以下示例代码实现了按钮旋转的动画效果： Entry Component struct AttrAnimationExample { St…...
【FusionInsight HD】FusionInsight HD 651创建集群-Yarn
FusionInsight HD 651创建集群-Yarn FusionInsight HD 651创建集群-Yarn登录FusionInsight Manager修改初始密码创建集群设置集群信息选择主机设置机架选择服务分配角色服务配置确定安装集群集群验证HDFS验证Yarn验证Zookeeper验证总结FusionInsight HD 651创建集群-Yarn 登录…...
MQ, RocketMQ, 安装
文章说明 本文主要说明RocketMQ的几种常见的安装方式。之前在工作中也用过RocketMQ，但是一直用的是测试环境上的，也没有自己动手安装过。这次专门抽了时间学习了一下。 文章目录 文章说明参考文献安装windows安装环境要求下载配置环境变量启动注意事项 …...
Python将COCO格式实例分割数据集转换为YOLO格式实例分割数据集
Python将COCO格式实例分割数据集转换为YOLO格式实例分割数据集 前言相关介绍COCO格式实例分割数据集转换为YOLO格式实例分割数据集coco格式对应的json文件，以test.json为例格式转换代码，内容如下 前言 由于本人水平有限，难免出现错漏…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效，它能挖掘数据中的时序信息以及语义信息，但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN，但是…...
深度学习习题2
1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...