当前位置： 首页 > news >正文

原生js实现的轮盘抽奖案例

news 2025/7/3 11:39:02

来到大学也是有二年了，吃饭最多的地方就是在食堂，经过这么久的时间，已经几乎是把每个窗口的菜都吃腻了，所以我打算做个轮盘抽奖的形式来决定我每天要吃些什么。

目录

实现效果图：

 静态搭建

 js代码

1.实现此功能的思路：

 2.先获取需要用到的dom元素，定义一些会用到的变量

3.给按钮绑定一个点击事件，触发轮盘旋转

4.实现函数

5.我大概说说实现思路

 完整代码

总结

实现效果图：

 静态搭建

html结构

 <div class="box"><ul><!-- 注意这里的类名是按照旋转速度来规范的 : item_index  为了方便我们后续再写js代码操作时更方便--><li class="item_1">iphone14</li><li class="item_2">冰箱</li><li class="item_3">洗衣机</li><li class="item_8">代金券</li><li class="btn" style="background-color: #fff;"><button style="margin: 14px; width: 120px;height: 120px;background-color: pink;border: #fff;">点击抽奖</button></li><li class="item_4">电脑</li><li class="item_7">电视</li><li class="item_6">空调</li><li class="item_5">特斯拉</li></ul><!-- 这里到时候放中奖信息的文字 --><div class="text"></div></div>

我这里的类名命名是为了后面改变它们的类名时更好的操作，所以就是按照轮盘旋转的顺序来依次命名的

css

    * {margin: 0;padding: 0;}.box {width: 500px;height: 500px;margin: 100px auto;}ul {display: flex;flex-wrap: wrap;justify-content: space-between;}ul li {list-style: none;width: 150px;height: 150px;background-color: beige;margin: 5px;font-size: 25px;text-align: center;line-height: 150px;}ul li img {width: 100%;height: 100%;}.text {text-align: center;margin-top: 20px;font-size: 25px;color: red;}.active {background-color: rgb(93, 221, 157);}

css也是简单的美化了一下页面，active是旋转时要切换的颜色，其他的就是一些居中布局等

 js代码

1.实现此功能的思路：

主要就是需要写一个执行函数，此函数的主要功能就是对选中的 li 元素进行类名的增删操作，主要还是使用一个定时器来实现此功能。

 2.先获取需要用到的dom元素，定义一些会用到的变量

const obj = {text: document.querySelector('.text'),btn: document.querySelector('.btn'),}const item = document.querySelectorAll('ul li')let rollTime; // 定义定时器变量用来清除定时器let time = 0; // 转动次数let speed = 10; // 转动时间间隔let times; // 总转动次数let sum = 0; //计算切换总次数

3.给按钮绑定一个点击事件，触发轮盘旋转

  //按钮点击事件obj.btn.addEventListener('click', () => {obj.text.innerHTML = ''; //清空文字times = parseInt(Math.random() * (20 - 30 + 1) + 50, 10); // 定义总转动次数，随机40 - 60次console.log(times);time = 0  //每次点击需要将这几个数字进行初始化sum = 0spin()})

4.实现函数

 function spin() {time++; // 转动次数加1sum++; //总转动次数加1//判断time是否大于8time = time > 8 ? 1 : time;//先清空其他的带有active类的liitem.forEach(item => {item.classList.remove('active')})clearTimeout(rollTime);//给带有类名item_1的加上类名document.querySelector(`.item_${time}`).classList.add('active')rollTime = setTimeout(() => {window.requestAnimationFrame(spin); // 进行递归动画 这段代码的作用是启动一个动画帧，以便在浏览器中渲染动画效果。动画帧是通过调用requestAnimationFrame()方法实现的，它允许你在动画帧中执行代码，而不是直接设置元素的样式。这样可以确保在渲染过程中不会出现跳帧的情况，从而实现毫秒级的渲染效果。}, speed * sum)if (sum === times) {clearTimeout(rollTime); //清除定时器//找出带有active类名的文字const active = document.querySelector('.active').innerHTMLobj.text.innerHTML = `恭喜你抽中了${active}`return}}

代码中也有一些相应的注释

5.我大概说说实现思路

总共有8的物品，所以我们要对time标使进行判断，如果大于8就要变为1，然后是循环遍历将所有的active类名清除，这里清除上一个定时器是因为在定时器中用到了递归渲染，所以要清除上一个定时器，否则可能会出现卡顿的情况，最后就是做判断退出函数，渲染页面， window.requestAnimationFrame(spin)的作用在代码注释中有，主要也是为了渲染更流畅不出现卡顿，这里直接调用递归也是ok的

 完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 500px;height: 500px;margin: 100px auto;}ul {display: flex;flex-wrap: wrap;justify-content: space-between;}ul li {list-style: none;width: 150px;height: 150px;background-color: beige;margin: 5px;font-size: 25px;text-align: center;line-height: 150px;}ul li img {width: 100%;height: 100%;}.text {text-align: center;margin-top: 20px;font-size: 25px;color: red;}.active {background-color: rgb(93, 221, 157);}</style>
</head><body><div class="box"><ul><!-- 注意这里的类名是按照旋转速度来规范的 : item_index  为了方便我们后续再写js代码操作时更方便--><li class="item_1">iphone14</li><li class="item_2">冰箱</li><li class="item_3">洗衣机</li><li class="item_8">代金券</li><li class="btn" style="background-color: #fff;"><button style="margin: 14px; width: 120px;height: 120px;background-color: pink;border: #fff;">点击抽奖</button></li><li class="item_4">电脑</li><li class="item_7">电视</li><li class="item_6">空调</li><li class="item_5">特斯拉</li></ul><!-- 这里到时候放中奖信息的文字 --><div class="text"></div></div><script>//简易的抽奖功能const obj = {text: document.querySelector('.text'),btn: document.querySelector('.btn'),}const item = document.querySelectorAll('ul li')let rollTime; // 定义定时器变量用来清除定时器let time = 0; // 转动次数let speed = 10; // 转动时间间隔let times; // 总转动次数let sum = 0; //计算切换总次数//按钮点击事件obj.btn.addEventListener('click', () => {obj.text.innerHTML = ''; //清空文字times = parseInt(Math.random() * (20 - 30 + 1) + 50, 10); // 定义总转动次数，随机20-30次console.log(times);time = 0sum = 0spin()})//写一个函数用来模拟轮盘抽奖，旋转次数也是模拟的function spin() {time++; // 转动次数加1sum++; //总转动次数加1//判断time是否大于8time = time > 8 ? 1 : time;//先清空其他的带有active类的liitem.forEach(item => {item.classList.remove('active')})clearTimeout(rollTime);//给带有类名item_1的加上类名document.querySelector(`.item_${time}`).classList.add('active')rollTime = setTimeout(() => {window.requestAnimationFrame(spin); // 进行递归动画 这段代码的作用是启动一个动画帧，以便在浏览器中渲染动画效果。动画帧是通过调用requestAnimationFrame()方法实现的，它允许你在动画帧中执行代码，而不是直接设置元素的样式。这样可以确保在渲染过程中不会出现跳帧的情况，从而实现毫秒级的渲染效果。}, speed * sum)if (sum === times) {clearTimeout(rollTime); //清除定时器//找出带有active类名的文字const active = document.querySelector('.active').innerHTMLobj.text.innerHTML = `恭喜你抽中了${active}`return}}</script>
</body></html>

总结

如果你跟我一样每天不知道吃啥，可以试试用这个轮盘来决定哦。

好好吃饭，好好学习，祝天天开心

相关文章：

原生js实现的轮盘抽奖案例

来到大学也是有二年了&#xff0c;吃饭最多的地方就是在食堂&#xff0c;经过这么久的时间&#xff0c;已经几乎是把每个窗口的菜都吃腻了&#xff0c;所以我打算做个轮盘抽奖的形式来决定我每天要吃些什么。 目录 实现效果图&#xff1a; 静态搭建 js代码 1.实现此功能的思路…...

编程日记 2023/9/10 23:51:04

最经典的解析LSA数据库(第六课)

初步认识OSPF的大致内容(第三课)_IHOPEDREAM的博客-CSDN博客 1 OSPF 工作过程 建立领居表 同步数据库 今天来 说一说数据库概念 计算路由表 2 什么是数据库&#xff1f; 数据库是一个组织化的数据集合&#xff0c;用于存储、管理和检索数据。它是一个可访问的集合&#x…...

编程日记 2023/9/10 23:49:42

C++基础入门

文章目录 前言一、C历史及发展1.C是什么2.C历史 二、开始C1.基础类型1.第一个简单的C程序2.命名空间1.命名空间的介绍2.命名空间的使用3.命名空间的using声明与using指示 3.初识输入输出操作4.引用1.引用概念2.引用的使用1.引用做参数2.引用做返回值 3.引用和指针的区别4.const…...

编程日记 2023/9/10 23:48:41

【每日随笔】驾驭人性 ② ( 员工立场问题 | 立场转变 | 吴越同舟 | 老板如何与员工结成利益共同体 )

文章目录 一、员工立场问题二、立场转变三、吴越同舟四、老板如何与员工结成利益共同体 一、员工立场问题 人的潜力是很大的 , 肩上抗 100 斤 水泥 和 肩上抗 100 斤黄金 , 能一样吗 , 扛着黄金绝对能扛回家 ; 员工 不愿意 与公司一条心是正常的 , 员工 拿的是 死工资 , 公司赚…...

编程日记 2023/9/10 23:47:39

C++（QT）画图行车

通过鼠标在窗口上点击形成多个点的连线&#xff0c;绘制一辆汽车沿着绘制的连线轨迹前进。要求连线点数大于20.可以通过清除按钮清除已经绘制的连线&#xff0c;并可以重新绘制一条轨迹连线。当车辆行驶到轨迹终点时&#xff0c;自动停止。&#xff08;汽车实在可用方块代替&am…...

编程日记 2023/9/10 23:46:38

Unity中Shader抓取屏幕并实现扭曲效果（优化）

文章目录 前言一、在之前顶点着色器的输入中&#xff0c;放弃了使用结构体传入&#xff0c;而是直接从应用程序阶段传入参数&#xff0c;这样写的话&#xff0c;对于程序来说&#xff0c;不方便扩张&#xff0c;所以需要对其进行修改实现1、定义结构体用于传入顶点坐标系2、因为…...

编程日记 2023/9/10 23:45:36

肖sir__设计测试用例方法之_（白盒测试）

白盒测试技术 一、定义&#xff1a; 白盒测试也叫透明盒测试&#xff0c;检查程序内部结构及路径一是否符合规格说明&#xff0c;二是否符合其代码规范。 因此&#xff0c;也叫结构测试或者逻辑驱动测试。 二、白盒测试常见方法&#xff1a; a、语句覆盖&#xff1b; b、判断覆…...

编程日记 2023/9/10 23:43:33

GoT：用大语言模型解决复杂的问题

GoT&#xff1a;用大语言模型解决复杂的问题 摘要介绍背景和符号表示语言模型和上下文学习Input-Output&#xff08;IO&#xff09;Chain of thought&#xff08;CoT&#xff09;Multiple CoTTree of thoughts&#xff08;ToT&#xff09; GoT框架推理过程思维变换聚合变换&…...

编程日记 2023/9/10 23:42:31

nginx服务和uwsgi服务如何设置开机自启动

上次学到了在云服务器下如何部署Django项目&#xff0c;用到了nginx服务和uwsgi服务&#xff0c;需要手工启动这2个服务的命令。 现在考虑如何设置开机自启动&#xff0c;为什么要这样考虑&#xff1f;因为服务器万一出问题&#xff0c;意外重启了&#xff0c;那我们部署的Dja…...

编程日记 2023/9/10 23:41:28

算法-分治算法

文章来源&#xff1a; https://blog.csdn.net/weixin_45630258/article/details/126425400 欢迎各位大佬指点、三连 一、分治 1、定义&#xff1a;分治&#xff0c;也就是分而治之。 它的一般步骤是&#xff1a; ① 将原问题分解成若干个规模较小的子问题&#xff08;子问题…...

编程日记 2023/9/10 23:40:27

react 实现监听逻辑

需求&#xff1a; 在一个页面下有多个子tab在某些tab 下&#xff0c;或者父节点的数据更新的时候&#xff0c;其他子tab 或者父节点也要同步更新 进程&#xff1a; 正常情况下会把所有用到的数据都移动到父节点&#xff0c;修改行为也都放在父节点但如果这样的话父节点的数据…...

编程日记 2023/9/10 23:39:25

vue项目一个页面包含多个时间选择器的处理方案

描述&#xff1a;vue项目中如果在一个页面使用多个时间选择器组件时&#xff0c;不同的时间选择器需要分别分开工作 解决方案一 原本是想直接每一个时间选择器都安排一套相对独立的维生系统&#xff0c;但是到后面发现繁琐至极&#xff0c;而且报错&#xff0c;果断放弃&#…...

编程日记 2023/9/10 23:38:24

机器学习入门教学——决策树

1、简介 决策树算法是一种归纳分类算法&#xff0c;它通过对训练集的学习&#xff0c;挖掘出有用的规则&#xff0c;用于对新数据进行预测。决策树算法属于监督学习方法。决策树归纳的基本算法是贪心算法&#xff0c;自顶向下来构建决策树。 贪心算法&#xff1a;在每一步选择…...

编程日记 2023/9/10 23:37:21

文献阅读：Chain-of-Thought Prompting Elicits Reasoning in Large Language Models

文献阅读&#xff1a;Chain-of-Thought Prompting Elicits Reasoning in Large Language Models 1. 文章简介2. 具体方法3. 实验结果 1. 数学推理 1. 实验设计2. 实验结果3. 消解实验4. 鲁棒性考察 2. 常识推理 1. 实验设计2. 实验结果 3. 符号推理 1. 实验设计2. 实验结果 4.…...

编程日记 2023/9/10 23:36:20

从零开发一款ChatGPT VSCode插件

‍本文作者是360奇舞团开发工程师 引言 OpenAI发布了ChatGPT&#xff0c;就像是给平静许久的互联网湖面上扔了一颗重磅炸弹&#xff0c;刹那间所有人都在追捧学习它。究其原因&#xff0c;它其实是一款真正意义上的人工智能对话机器人。它使用了深度学习技术&#xff0c;通过大…...

编程日记 2023/9/10 23:35:18

go基础09-Go语言的字符串类型

字符串类型是现代编程语言中最常使用的数据类型之一。在Go语言的先祖之一C语言当中&#xff0c;字符串类型并没有被显式定义&#xff0c;而是以字符串字面值常量或以’\0’结尾的字符类型&#xff08;char&#xff09;数组来呈现的&#xff1a; #define GOAUTHERS "Rober…...

编程日记 2023/9/10 23:34:16

【C++模拟实现】手撕AVL树

【C模拟实现】手撕AVL树 目录 【C模拟实现】手撕AVL树AVL树的介绍&#xff08;百度百科&#xff09;AVL树insert函数的实现代码验证是否为AVL树AVL树模拟实现的要点易忘点AVL树的旋转思路 作者&#xff1a;爱写代码的刚子 时间&#xff1a;2023.9.10 前言&#xff1a;本篇博客将…...

编程日记 2023/9/10 23:33:15

如何重置 docker中的mariadb的root

停止 Mariadb 容器&#xff1a;运行以下命令停止正在运行的 Mariadb 容器&#xff1a; docker stop <container_name>将 <container_name> 替换为你的 Mariadb 容器的名称或容器ID。 删除 Mariadb 容器&#xff1a;运行以下命令删除已停止的 Mariadb 容器&#x…...

编程日记 2023/9/10 23:32:12

设计模式系列-原型模式

一、上篇回顾 上篇创建者模式中&#xff0c;我们主要讲述了创建者的几类实现方案&#xff0c;和创建者模式的应用的场景和特点&#xff0c;创建者模式适合创建复杂的对象&#xff0c;并且这些对象的每 个组成部分的详细创建步骤可以是动态的变化的&#xff0c;但是每个对象的组…...

编程日记 2023/9/10 23:31:11

家用电脑可以用做服务器吗

家用电脑的结构与服务器的结构是相同的&#xff0c;家用电脑是可以用来搭建服务器使用。但使用家用电脑做服务器在稳定性会比服务器差很多 1.家用电脑没有公网IP&#xff0c;网络运营商分配的IP重启路由之后是会变化&#xff0c;不固定。服务器运行是需要有固定IP让人连接访问。…...

编程日记 2023/9/10 23:30:09

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/6/30 6:35:16

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/7/2 17:00:57

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/7/3 5:29:36

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/6/21 3:27:34

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/6/16 21:39:46

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/6/21 19:05:09

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/6/26 10:08:46

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/6/26 0:36:58

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/6/21 14:50:48

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/6/28 13:39:02