用JS简单实现九宫格抽奖的示例代码
作者：sherlockkid7
在网上经常看见一些抽奖页面,也玩过不同类型的抽奖活动,但是一直没有做过抽奖的功能,所以今天来实现一个简单的九宫格抽奖功能,文中有详细的代码示例供大家参考,感兴趣的朋友可以自己动手尝试一下
效果展示
页面布局
九宫格抽奖的布局基本是由九个方块组成，一般有中间是一个开始抽奖按钮，四周的方块是不同的奖项；也有像掘金这样的九个都是奖项，下面再加个抽奖按钮；这里实现的是第一种类型
页面主要包含一个标题和转盘，转盘包含8个奖品子元素和一个开始抽奖按钮，使用flex布局，排列元素。
8个奖品子元素自定义了一个属性data-order，表示开始抽奖的时候顺时针方向上当前自己位置的索引
具体实现
1. 定义奖品数组prize_list
模拟出8个不同的奖品数据。循环奖品数组，将对应位置的奖品展示到页面
获取所有的奖品元素，前三个奖品数据直接展示到对应索引的奖品元素，后面的需要根据自定义属性data-order指定当前数据展示在哪个位置（顺时针方向指定位置）
2. 创建函数runCircle()
用于移除当前奖品元素的选中样式，同时自增当前奖品的索引值，再加上选中样式。当奖品索引值大于7时，奖品索引值需要变成0
3. 创建抽奖函数controll（），处理转盘抽奖的运行逻辑
在该函数中自增抽奖转动次数，然后调用 runCircle 函数来改变当前选中的奖品奖项。如果抽奖的次数超过了 minimum_jumps + 10 并且当前选中的奖项就是奖品，那么就会停止抽奖，并在页面上显示一个消息，告诉用户获得了哪个奖品。否则，就根据抽奖的次数来改变转盘转动的速度。
当抽奖转动次数等于抽奖开始的最小抽奖次数时，奖品的结果值
prizeId在0-8 的数值中随机取得，決定出奖品的位置
const total_items = 8 //奖品的总数
let prizeId = -1 // 奖品的结果，初始值为-1，表示还没有开始抽奖
let current_index = -1 //当前选中奖项索引
const minimum_jumps = 30 // 超过该数字进入抽奖
let jumps = 0 //抽奖转动次数，初始值为0
let speed = 100 //转动速度
let timer = 0
let disabled = false
// 奖品抽奖
function controll() {
jumps += 1
runCircle()
// 抽到奖品停止游戏
if (jumps > minimum_jumps + 10 && prizeId === current_index) {
clearTimeout(timer)
disabled = false
const message = document.createElement('p')
message.className = 'message'
message.innerHTML = `恭喜你获得：${prize_list[current_index].name}!`
container.appendChild(message)
prizeId = -1
jumps = 0
} else {
// 加快
if (jumps < minimum_jumps) {
speed -= 5
// 決定奖品的位置
} else if (jumps === minimum_jumps) {
prizeId = generatePrizeNumber()
} else {
// 下一个就是奖品时放慢速度
if ((jumps > minimum_jumps + 10) && prizeId === (current_index + 1)) {
speed += 600
} else {
speed += 20 // 減速
}
}
if (speed < 40) {
speed = 40
}
timer = setTimeout(controll, speed)
}
}
function init() {
jumps = 0
speed = 100
prizeId = -1
controll()
}
4. 添加开始抽奖按钮的点击事件，执行抽奖函数开始抽奖
在已经抽奖的情况下，改变disabled变量为真，防止重复执行抽奖
根据以上步骤就可以实现一个简单的九宫格抽奖了
到此这篇关于用JS简单实现九宫格抽奖的示例代码的文章就介绍到这了,更多相关JS实现九宫格抽奖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！