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为例格式转换代码，内容如下 前言 由于本人水平有限，难免出现错漏…...
借助 Mybatis 的动态 SQL 解决传参不确定问题
在上一篇的：Mybatis 操作数据库的基本 CRUD 以及查询操作详析_糊糊涂涂的博客-CSDN博客中介绍了Mybatis使用固定SQL语句操作数据，本篇介绍 Mybatis 一个强大的特性：动态SQL。 动态 SQL 解决什么问题？ 那当我们要执行的业务逻辑有…...
前端框架学习-Vue（一）
Vue简介 百度百科上关于vue的词条，说vue时一款渐进式JavaScript框架， 简单来说,渐进式是一种设计理念,即在不失去当前功能的前提下,逐步添加新的特性。 说明它时一直在进行维护的。 Vue3，中使用*.vue作为文件后缀，html，…...
Elasticsearch Query DSL
Elasticsearch Query DSL 这里使用的 Elasticsearch 的版本为 7.12.1。 1、基本概念 1.1 文档(Document) ElasticSearch 是面向文档的，文档是所有可搜索数据的最小单位，例如 MySQL 的一条数据记录。 文档会被序列化成为 json 格式，保存在…...
腾讯云 CODING × K+ 峰会再次携手开启软件行业新风向
点击链接了解详情 近日，K 全球软件研发行业创新峰会在北京成功举办。腾讯云 CODING 作为云原生工具领跑者受邀参与此次峰会。会议现场，展台打卡火爆、演讲干货满满，为观众带来高质量的行业内容。 腾讯云全链路高效 开发上云实践 技术创新…...
2023年发布的25个开源大型语言模型总结
大型语言模型(llm)是一种人工智能(AI)，在大量文本和代码数据集上进行训练。它们可以用于各种任务，包括生成文本、翻译语言和编写不同类型的创意内容。 今年开始，人们对开源LLM越来越感兴趣。这些模型是在开源许可下发布的，这意味…...
Istio网关Gateway 启用TLS
Istio网关Gateway概述 Istio网关Gateway是一个负责处理南北向流量的组件，它通常会暴露服务网格内部的服务，以便外部的请求能够访问到服务网格中的服务。Istio网关Gateway支持多种协议，包括HTTP、HTTPS和GRPC等。 在Istio网关Gateway中&#…...
slam建图与定位_cartographer代码阅读(7)后端约束构建
1.cartographer里的节点:当扫描匹配结束后，有新的一帧scan加入到submap中，这个扫描匹配的结果就叫做节点 global_trajectory_builder.cc // 将匹配后的结果 当做节点 加入到位姿图中auto node_id pose_graph_->AddNode(matching_result->insertio…...
Android usb 配件模式通信示例
当使用 Android 设备作为 USB 配件时，可以使用 Android 提供的 USB Accessory API 来进行 USB 通信。以下是一个简单的 Android USB 配件模式的通信例子。在本例中，我们将接收连接到 Android 设备的 USB 主机发送的数据并向 USB 主机发送响应。 首先&am…...
【Hive实战】Hive的压缩池与锁
文章目录 Hive的压缩池池的分配策略自动分配手动分配隐式分配 池的等待超时Labeled worker pools 标记的工作线程（自定义线程池）Default pool 默认池Worker allocation 工作线程的分配 锁Turn Off ConcurrencyDebuggingConfigurationhive.support.concur…...
【VUE】使用elementUI tree组件根据所选id自动回显
需求如下： 1.点击父级节点 将父级节点下children中所有id放入数组 2.点击父级下的子节点 将点击的子节点放入数组 3.取消选择父节点，将放入数组的所有子节点id删除 4.根据选择的子节点数组，匹配他所属的父节点 <el-tree:data"tre…...