原生JavaScript随机抽奖案例

案例需求：抽奖机中有多个不同的奖项，点击按钮开始进行随机抽奖，默认所有的奖项得到的概率是一致的。

页面布局：大致布一下，可根据喜好进行调整。

<div><div class="awards">特等奖</div><div class="awards">一等奖</div><div class="awards">二等奖</div><div class="awards">三等奖</div><div class="awards">安慰奖</div><div class="awards">鼓励奖</div><div id="start">开始抽奖</div>
</div>

页面样式：可根据自己喜好随意进行编写，这里我粗略写了一下自己的版本。

#start,
.awards {width: 100px;height: 100px;float: left;background: rgb(233, 193, 15);margin-left: 10px;text-align: center;line-height: 100px;font-size: 20px;font-family: '华文行楷';color: white;border-radius: 50%;
}
#start {background: #000;width: 50px;height: 50px;line-height: 50px;margin-top: 25px;
}

JS实现的内容如下：
点击“开始”按钮，触发一个定时器，规定一个时间以限制定时器触发的次数，在每触发一个定时器时，不断获得一个随机数，通过这个随机数来确定获得的奖项。

//1. 选出所有需要进行操作的元素
let btn = document.querySelector('#start'),
awards = document.querySelectorAll('.awards');//2.此处先进行设置一个定时器，方便后续清除，也可以防止重复触发定时器产生的bug
let timer = null;//3.定义一个随机奖项的方法
function randomAwards() {//设置一个初始值作为判断时间停止的标志let logo = 0;//3.1. 触发一个定时器，此处判断是防止重复触发定时器if(timer == null) {timer = setInterval(() => {logo++;//3.2. 获得一个随机数作为索引，算法是元素的最后一个索引值 - 第一个索引值 + 初始值let random = Math.round(Math.random() * (awards.length - 1 - 0) + 0);//3.3. 排他思想：将所有元素恢复原来的样式for(let i = 0; i < awards.length; i++) {awards[i].style.backgroundColor = "rgb(233, 193, 15)";}//3.4. 给选中元素添加样式awards[random].style.backgroundColor = 'orange';//3.5. 设置定时器有效时间，停止定时器。因为定时器获得随机数的时间是100ms，即0.1秒，所以可以获得的随机数个数便是规定停止的时间/0.1秒，此处规定停止时间是5秒if(logo >= 5/(100/1000)) {clearInterval(timer);timer = null;}}, 100)}
}//点击开始抽奖按钮进行抽奖
btn.addEventListener('click', randomAwards());

原生JavaScript随机抽奖案例相关推荐

JavaScript简单实现随机抽奖案例
演示效果 JavaScript相关代码 <script>const personArr = ['周杰伦', '刘德华', '周星驰', '黎明', '张学友'] // 参与人员名单cons ...
原生JavaScript随机点名表
效果: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"><titl ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
Web APIs，BOM树，声明dom对象，年会抽奖案例，随机图片，表单，用户注册倒计时，innerHTNL，classList的使用
介绍严格意义上讲,我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系,ECMAScript 简称 ES 它提供了一套语言标准规范,如变量.数据类型.表达式.语 ...
原生JavaScript实现随机点名
原生JavaScript实现随机点名一,HTML代码 <div id="center"><div id="showname">O_O ...
利用JavaScript实现随机抽奖代码
利用JavaScript实现随机抽奖代码一.分析: 二.部分重要功能代码: 1.body页面: 2.通过点击事件来显示随机号码: 3.设置中奖号码: 4.判断是否中奖的方法三.全部代码实现: 图片 ...
原生JS开箱随机抽奖代码
下载地址原生JS制作开箱随机抽奖小游戏,思路比较简单,十分实用!您可以随意定制抽奖奖品,点击开启按钮,箱子筛选随机产生中奖结果弹窗提示.ps:演示内容无任何含义. dd:
JavaWeb——使用JavaScript实现随机抽奖
实验名称: 使用 JavaScript实现随机抽奖实验目的: 1. 掌握JavaScript的基本语法及定 ...
九宫格抽奖源代码php,原生javascript实现九宫格抽奖效果代码
本篇文章主要介绍了原生javascript实现九宫格抽奖效果代码.具有很好的参考价值.下面跟着小编一起来看下吧效果图: 代码如下: *{margin:0;padding:0;} #container ...

原生JavaScript随机抽奖案例

原生JavaScript随机抽奖案例相关推荐

最新文章

热门文章