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为例格式转换代码，内容如下 前言 由于本人水平有限，难免出现错漏…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 （1）设置网关 打开VMware虚拟机，点击编辑…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
Frozen-Flask ：将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...