九宫格转圈圈抽奖活动，有加速，减速效果
在线访问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 三、期刊征稿范围 《网络语义学杂志》…...
iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘
美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
C++：多态机制详解
目录 一. 多态的概念 1.静态多态（编译时多态） 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1）.协变 2）.析构函数的重写 5.override 和 final关键字 1&#…...
免费数学几何作图web平台
光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
java高级——高阶函数、如何定义一个函数式接口类似stream流的filter
java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用（Math::max） 2 函数接口…...
Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程
鸿蒙电脑版操作系统来了，很多小伙伴想体验鸿蒙电脑版操作系统，可惜，鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机，来体验大家心心念念的鸿蒙系统啦！注意：虚拟…...
Easy Excel
Easy Excel 一、依赖引入二、基本使用1. 定义实体类（导入/导出共用）2. 写 Excel3. 读 Excel 三、常用注解说明（完整列表）四、进阶：自定义转换器（Converter） 其它自定义转换器没生效 Easy Excel在…...