九宫格转圈圈抽奖活动，有加速，减速效果
在线访问demo和代码在底部
代码，复制就可以跑
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>🐯🐯🐯</title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 300px;height: 300px;border: 1px solid grey;}.item {width: 80px;height: 80px;position: absolute;background-color: gainsboro;display: flex;justify-content: center;align-items: center;}.item.active {background-color: red;font-weight: 600;}</style>
</head><body><h1 id="result">这一次结果</h1><div class="box" id="box"></div><button id="start">开始</button><script>let box = document.querySelector("#box")let start = document.querySelector("#start")let result = document.querySelector("#result");//奖项个数const itemLen = 8;let arr = [];//开启位置let startIndex = 0;let timer = null;let speed = 80;//随机工具函数function getRandomNumber(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}//基础圈数let baseTarget = getRandomNumber(4, 6) * itemLen;//开奖索引let targetIndex = null;//基础圈数+开奖索引let totalCount = 0;//初始化dom渲染for (let i = 0; i < itemLen; i++) {arr.push("奖项：" + i)}let domStr = document.createDocumentFragment();const domItems = []for (let i = 0; i < arr.length; i++) {let dom = document.createElement("div");dom.className = "item";dom.innerHTML = arr[i];switch (i) {case 0:dom.style.top = 0;dom.style.left = 0;break;case 1:dom.style.top = 0;dom.style.left = "110px";break;case 2:dom.style.top = 0;dom.style.right = 0;break;case 3:dom.style.top = "100px";dom.style.right = 0;break;case 4:dom.style.bottom = 0;dom.style.right = 0;break;case 5:dom.style.bottom = 0;dom.style.right = "110px";break;case 6:dom.style.bottom = 0;dom.style.left = 0;break;case 6:dom.style.bottom = "100px";dom.style.left = 0;break;case 7:dom.style.bottom = "120px";dom.style.left = 0;break;}box.appendChild(dom)domItems.push(dom);}box.appendChild(domStr);function frame() {//清除定时器clearTimeout(timer);//获取递增过程的索引变量对饮奖项的索引let currentpos = startIndex % itemLen;//更新奖项的高亮样式for (let i = 0; i < itemLen; i++) {if (currentpos == i) {domItems[i].classList.add("active");}else {domItems[i].classList.remove("active");}}//如果达到中奖的目标位置就停止if (startIndex == totalCount) {clearTimeout(timer);return;}//地址的索引不断的递增startIndex++;//获取运行比例let percent = Math.floor(startIndex / totalCount * 100);//递增的索引跑了目标值的50%前都加快if (percent <= 50) {//需要兜底，否则会出意外if (speed > 10) {speed--;}}else {//后50%速度开始减速speed += 6;}//这里的定时器的时间是动态的！！！！重要timer = setTimeout(() => {frame();}, speed)}function startGame() {//基础圈数baseTarget = getRandomNumber(4, 6) * itemLen;//随机目标位置targetIndex = getRandomNumber(0, 7);//总个数totalCount = baseTarget + targetIndex;result.innerHTML = "这次开奖的结果：" + arr[targetIndex];startIndex = 0;//初始化速度speed = 80;//重置完所有配置后，开始跑定时器frame();}start.onclick = startGame;</script>
</body></html>在线demo
代码在这，请直接品尝JS Bin - Collaborative JavaScript Debugging
相关文章：
九宫格转圈圈抽奖活动，有加速，减速效果
在线访问demo和代码在底部 代码，复制就可以跑 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><tit…...
利用阿里OSS服务给文件设置过期删除--简单版
在云存储广泛应用的今天，阿里云的Object Storage Service（OSS）以其高度可扩展性、安全性和成本效益，成为了众多企业和开发者存储海量数据的首选方案。随着数据量的不断膨胀，高效的数据管理和成本控制变得尤为重要。其中…...
LabVIEW控制Trio控制器
将LabVIEW与Trio控制器结合，可以实现对复杂运动系统的控制和监测。以下是详细的方法和注意事项： 一、准备工作 软件安装： 安装LabVIEW开发环境，确保版本兼容性。 安装Trio控制器的相关驱动程序和软件，如Trio Motion …...
02--大数据Hadoop集群实战
前言： 前面整理了hadoop概念内容，写了一些概念和本地部署和伪分布式两种，比较偏向概念或实验，今天来整理一下在项目中实际使用的一些知识点。 1、基础概念 1.1、完全分布式 Hadoop是一个开源的分布式存储和计算框架࿰…...
【ARMv8/v9 异常模型入门及渐进 10 -- WFI 与 WFE 使用详细介绍 1】
请阅读【ARMv8/v9 ARM64 System Exception】 文章目录 WFI 与 WFE等待事件（WFE）发送事件（SEV）本地发送事件（SEVL）WFE 唤醒事件 WFE 使用场景举例与代码实现wfe睡眠函数sev 事件唤醒函数全局监视器和自旋锁 …...
@DateTimeFormat 和 @JsonFormat 的区别和使用方式
一. DateTimeFormat 详细用例 DateTimeFormat 是 Spring Framework 的一部分，它用于绑定 Web 请求中的字符串到 Java 的日期和时间类型。这种转换常常在 Spring MVC 控制器中处理 HTTP 请求参数或路径变量时使用。 使用场景: 将 HTTP 请求中的日期(也就是网络传输…...
C++—结构体
结构体（struct），是一种用户自定义复合数据类型，可以包含不同类型的不同成员。 结构体的声明定义和使用的基本语法： // 声明结构体struct 结构体类型 { 成员1类型 成员1名称; ...成员N类型 成员N名称; };除声明…...
指针与引用
指针与引用 一：指针与引用场景二级目录三级目录 一：指针与引用场景 二级目录 三级目录...
使用 mysql-binlog-connector 监听处理 MySQLBinlog 文件
1. 需求概述 业务开发中经常需要根据一些数据变更实现相对应的操作。例如，一些用户注销自己的账户，系统可以给用户自动发短信确认，这时有两种解决方案，一种是耦合到业务系统中，当用户执行注销操作的时候，执…...
CF Div2 729 Plus and Multiply
原题链接：Problem - 1542B - Codeforces 题目大意：初始集合里面只有1，给a和b，可以对集合里面的数x进行二种操作，x*a，xb,并放入集合，给数n，问集合里面会不会产生n，会就输…...
Joomla 3.7.0 (CVE-2017-8917) SQL注入漏洞环境
1 漏洞概述 Joomla是一个基于PHP的内容管理系统（CMS），广泛应用于各类网站。2017年，Joomla 3.7.0版本被发现存在SQL注入漏洞（CVE-2017-8917），攻击者可以利用该漏洞对数据库进行未授权查询或操作…...
Python高克勒-曼宁-斯特里克勒公式计算一维流量
📜曼宁公式-用例 📜Python流体数据统计模型和浅水渗流平流模型模拟 | 📜Python蒸发散物理问题(微积分-线性代数-拉普拉斯和傅立叶变换) ✒️Python计算一维流量 高克勒-曼宁-斯特里克勒公式公式基于一维（横截面平均）…...
【GD32系列--基本定时器Timer + 定时1ms 灯光间隔1s闪烁例程】
这里写目录标题 一、定时器的作用二、定时器简介1、定时器类型2、时钟树3、定时器功能配置框图 三、定时器寄存器分析1、控制寄存器（TIMERx_CTL0)）2、DMA 和中断使能寄存器 (TIMERx_DMAINTEN)3、预分频寄存器 (TIMERx_PSC)4、计数器自动重载寄存器 (TIME…...
第11章 集合与迭代器
目录 目录 目录 11.1 Collection集合 11.1.1 集合的概念 11.1.2 Collection接口 1、添加元素 2、删除元素 3、查询与获取元素 11.2 List 有序集合 11.2.1 新增方法 11.2.2 ArrayList 11.2.3 LinkedList 1、单向链表 2、双向链表 3、删除元素 11.3 Set 无序集合 …...
探索Linux中的神奇工具：探秘tail命令的妙用
探索Linux中的神奇工具：探秘tail命令的妙用 在Linux系统中，tail命令是一个强大的工具，用于查看文件的末尾内容。本文将详细介绍tail命令的基本用法和一些实用技巧，帮助读者更好地理解和运用这个命令。 了解tail命令 tail命令用…...
1688商品API接口：电商数据自动化的新引擎
1688作为中国领先的B2B电子商务平台，为广大商家和制造商提供了一个展示和交易商品的广阔市场。随着1688商品API接口的推出，开发者和商家现在能够通过编程方式自动化获取和管理商品数据，极大地提高了工作效率和数据处理的灵活性。 一、1688商…...
路由器不能端口映射什么原因？如何设置内网映射？
近期有小伙伴发来求助信息，他以前开游戏服务器和别人一起玩，那个时候端口映射还好，不知道哪一天开始突然不行了，已经是公网了，光猫是桥接的状态，连路由器都换了，就是不能端口映射开服务器&#…...
开源RAG，本地mac启动 dify源码服务
一、Dify文档 参考官方文档来操作，基本没太大的问题。一些细节，我在本篇文章中补充了出来。 这篇文章主要讲以源码的方式启动后端服务，前端服务使用容器启动。 dify 文档地址 欢迎使用 Dify | 中文 | Dify Dify 本地源码部署文档ÿ…...
【Linux取经路】基于信号量和环形队列的生产消费者模型
文章目录 一、POSIX 信号量二、POSIX 信号量的接口2.1 sem_init——初始化信号量2.2 sem_destroy——销毁信号量2.3 sem_wait——等待信号量2.4 sem_post——发布信号量 三、基于环形队列的生产消费者模型3.1 单生产单消费模型3.2 多生产多消费模型3.3 基于任务的多生产多消费模…...
计算机SCI期刊，中科院2区，收稿范围非常广泛！
一、期刊名称 Journal of Web Semantics 二、期刊简介概况 期刊类型：SCI 学科领域：计算机科学 影响因子：2.5 中科院分区：2区 出版方式：开放出版 版面费：$1600 三、期刊征稿范围 《网络语义学杂志》…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...
基于单片机的宠物屋智能系统设计与实现（论文+源码）
本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢，连接红外测温传感器，可实时精准捕捉宠物体温变化，以便及时发现健康异常；水位检测传感器时刻监测饮用水余量，防止宠物…...
pgsql：还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决
问题： pgsql数据库通过备份数据库文件进行还原时，如果表中有自增序列，还原后可能会出现重复的序列，此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”，…...
 ----- Python的类与对象)
Python学习(8) ----- Python的类与对象
Python 中的类（Class）与对象（Object）是面向对象编程（OOP）的核心。我们可以通过“类是模板，对象是实例”来理解它们的关系。 🧱 一句话理解： 类就像“图纸”，对…...
云原生安全实战：API网关Envoy的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关 作为微服务架构的统一入口，负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...
Java多线程实现之Runnable接口深度解析
Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...