react实现转盘抽奖功能

一个写前端的

已于 2023-10-27 17:02:57 修改

阅读量5.4k

点赞数 2

分类专栏： javascript react 文章标签： react.js notepad++ 前端

于 2020-06-15 17:42:08 首次发布

本文链接：https://blog.csdn.net/qq_16139383/article/details/106764883

版权

临近618，公司产品需要做促销活动，产品经理提出新需求，要做一个转盘抽奖的功能。接到这个需求时，我的内心其实是拒绝的，奈何，身不由己。做吧！！！

UI效果图如下：
在这里插入图片描述
接到这个任务时，原本是想找个现有的插件去实现，由于需要同时开发h5和微信小程序两个端，苦苦寻觅，终找不到合适的，罢了罢了，还是自己动手，丰衣足食吧！

实现原理： 通过css3的 transition 和 transform 两个属性

具体实现步骤：

1、首先，我们简单定义一个奖品数组，实际开发中是调后台接口获取奖品，以下是为了方便演示

const giftArr = [
	{
   giftName: 'iphone xs'},
	{
   giftName: '小米智能音箱'},
	{
   giftName: 'ThinkPad X390 LTE版'},
	{
   giftName: 'air pods 2'},
	{
   giftName: '雷蛇鼠标'}
]

2、如下图划分区域，因为转盘旋转时是顺时针旋转，所以按照下图划分奖品区域，图中序号表示奖品数组每一项的index
在这里插入图片描述
3、定义每个奖品的角度区域

const LOTTERY_AREA_DEG = [[1, 59], [61, 119], [121, 179], [181, 239], [241, 299], [301, 359]]

这里我们把60度的整数倍度数给去掉了，是为了防止转到60度，120度这样的度数

4、为了模拟抽中的奖品，我们写个方法随机生成奖品的序号，以及根据奖品序号拿到转盘需要转到的角度

// 生成两个数范围内的随机整数
const randomNum <

最低0.47元/天解锁文章