分享常用的62 个九宫格抽奖及各种宫格效果源码

九宫格抽奖及各种宫格效果详细介绍

功演示效果及源码下载地址：https://www.erdangjiade.com/js/17-0-0-0

九宫格抽奖盘是一种常见的抽奖形式，由九个格子组成，每个格子代表一个奖项。抽奖时，指针会随机旋转，最终落在某个格子上，对应的就是中奖者获得的奖项。

这个JavaScript实现的九宫格抽奖盘具有以下功能：

• 九宫格布局，每个格子可以设置不同的奖项。
• 随机旋转指针，模拟抽奖过程。
• 根据最终停止的角度，计算中奖的奖项。
• 显示中奖结果。

2. 代码解析

HTML:

HTML代码主要用于定义抽奖盘的结构和样式。

• #lottery 元素代表整个抽奖盘，是一个直径为300px的圆形容器。
• .grid-item 元素代表九个格子，每个格子都是一个直径为100px的圆形。
• #pointer 元素代表指针，是一个直径为20px的圆形。
• #start-btn 元素代表开始抽奖按钮。

JavaScript:

JavaScript代码主要用于实现抽奖逻辑。

• prizes 数组定义了九个奖项。
• rotateAngle 变量用于存储指针旋转的角度。
• startBtn.addEventListener('click', () => {}) 函数用于处理开始抽奖按钮的点击事件。
• 该函数首先会随机生成一个旋转角度，然后通过 pointer.style.animation 属性设置指针的旋转动画。
• 为了模拟抽奖延迟，会使用 setTimeout 函数延迟一定时间后执行后续操作。
• 在延迟时间结束后，会停止指针的旋转动画，并根据最终的角度计算中奖的奖项。
• 最后，会弹出提示框显示中奖结果。

代码改进:

为了使抽奖盘更加美观和实用，可以进行以下改进：

• 添加背景图片和音效，提升用户体验。
• 支持奖项概率设置，让抽奖更公平。
• 提供二次抽奖和重置功能，方便用户操作。

3. 应用场景

九宫格抽奖盘可以应用于各种场景，例如：

• 商场促销活动：可以用九宫格抽奖盘来吸引顾客参与活动，提升销量。
• 线上活动：可以用九宫格抽奖盘来增加用户互动，提升参与度。
• 年会抽奖：可以用九宫格抽奖盘来活跃气氛，给员工带来惊喜。

4. 总结

九宫格抽奖盘是一种简单易用的抽奖形式，可以应用于各种场景。这个JavaScript实现的九宫格抽奖盘功能完整，代码易懂，可以作为学习和参考的示例。