九宫格转圈圈抽奖活动，有加速，减速效果
在线访问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 三、期刊征稿范围 《网络语义学杂志》…...
Win11 右键菜单缺少“新建文本文档“win11 某些软件中文乱码
Win11 右键菜单缺少“新建文本文档“Win11 右键菜单缺少"新建文本文档"是常见系统配置问题，主要通过注册表修复或记事本应用重装即可解决。核心解决方法（win11 亲测可行）注册表修复（最常用）按Wi…...
10B小模型为何在真实业务中碾压百B大模型
1. 项目概述：小模型正在悄悄改写大模型的游戏规则最近在几个技术团队的内部分享会上，我连续三次被问到同一个问题：“你们还在追着百B参数的大模型跑吗？”——问话的人里，有刚从云厂商调来的架构师，有带AI产…...
终极指南：免费开源的AMD Ryzen调试神器SMUDebugTool完整使用教程
终极指南：免费开源的AMD Ryzen调试神器SMUDebugTool完整使用教程 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: …...
LangGraph Reducer 深度应用：为什么你的 State 合并总是出问题？
这篇文章帮你搞定 LangGraph Reducer 的高级用法，从源码解析到生产级模式，从并发安全到测试策略 阅读提示 适合谁看：已读过 State 设计模式基础，想深入 Reducer 机制的工程师看完能做什么：能实现生产级 Reducer&#x…...
中文Kodi媒体中心终极指南：4大本土化插件解决方案
中文Kodi媒体中心终极指南：4大本土化插件解决方案 【免费下载链接】xbmc-addons-chinese Addon scripts, plugins, and skins for XBMC Media Center. Special for chinese laguage. 项目地址: https://gitcode.com/gh_mirrors/xb/xbmc-addons-chinese 你是否…...
Python 3 简介
Python 3 简介 引言 Python 是一种广泛使用的编程语言，以其简洁的语法和强大的库支持而闻名。Python 3 是 Python 编程语言的最新主要版本，自 2008 年发布以来，它已经成为了许多开发者和企业首选的编程语言之一。本文将简要介绍 Python 3 的特点、应用领域以及学习资源。 …...
将Claude Code编程助手无缝对接至Taotoken解决账号与Token限制
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 将Claude Code编程助手无缝对接至Taotoken解决账号与Token限制 对于依赖Claude Code进行编程辅助的开发者而言，遇到官方…...
从零搭建 Geo 开源项目源码开发环境——以 GeoServer 为例
在地理信息（GIS）与空间数据服务开发中，Geo 系开源项目（如 GeoServer、GeoPandas、GeoDjango 等）非常常见。很多团队后期都会走到“读源码 / 改源码 / 二次开发”这一步，而第一步往往是：把源码跑…...
如何快速掌握ComfyUI_InstantID：从零到一的AI人脸编辑完整实战指南
如何快速掌握ComfyUI_InstantID：从零到一的AI人脸编辑完整实战指南 【免费下载链接】ComfyUI_InstantID 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI_InstantID 在AI图像生成领域，保持特定人物身份的同时实现风格转换一直是个技术挑战…...
Audio Slicer：智能音频分割终极指南，告别繁琐手动剪辑
Audio Slicer：智能音频分割终极指南，告别繁琐手动剪辑 【免费下载链接】audio-slicer A simple GUI application that slices audio with silence detection 项目地址: https://gitcode.com/gh_mirrors/aud/audio-slicer 还在为音频剪辑的繁琐操作…...