我正在参加「码上掘金挑战赛」详情请看：[码上掘金挑战赛来了！](https://juejin.cn/post/7139728821862793223 "https://juejin.cn/post/7139728821862793223")”
ps:以前用vue写过css大转盘抽奖，当时对4个奖品以下的转盘样式会错乱，在这里已修复这个问题；
## 1.html编写；为了能自适应奖品个数，我把背景图以及奖品做了分开，class="luckWhellBgMain"这个div是放入背景的容器; class="wheel-main"这个div是放大转盘的容器；class="prize_point"这个div是放抽奖点击的按钮，当大转盘转动的时候，这个是固定的；
![1663674006481.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9d4bcc23fd54d92a917c8583d0acf7b~tplv-k3u1fbpfcp-watermark.image?) ### 2.css编写 css的样式基本上可以根据自己的容器进行样式编写；主要是这个.rotateStyle样式，这里运用了css3的transition动画效果，在js中我们只需要改变transfrom的样式就好了；
![1663674282949.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7367006ab6eb4f79b1696384a645c246~tplv-k3u1fbpfcp-watermark.image?) ### 3.js编写这一段主要是定义各种变量，因为奖品里面一般都有文字，这里定义了最大字体为24号字，这里面的data是奖项个数的存储，这个奖项是可以随意改变的，可以是从后台动态获取再赋值；
![1663674616184.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9018cc24f9b449c996cd167261e55c46~tplv-k3u1fbpfcp-watermark.image?)
下面的这段代码是把样式赋值到html中，一开始通过循环把样式赋值到奖品的数组中；一个是style2为背景的样式，这个样式加入可以做到奖品在4个一下样式不会错乱，style为大转盘的样式，给每个样式旋转角度，这样才能完整对应到大转盘中，angleList这个是记录旋转的角度，当有多次抽奖的时候可以从这个角度计算增加旋转的角度； ```js prizeAddHtml(prizeList); //每个奖增加style function formatPrizeList(list) { const l = list.length; // 计算单个奖项所占的角度 const average = CIRCLE_ANGLE / l; //60 const half = average / 2; //30 const rightBig = l == 2 ? '50' : '0'; const heightBig = l <= 3 ? '100' : '50'; const topBig = l == 3 ? '-50' : '0'; const skewMain = l <= 2 ? 0 : -(l - 4) * 90 / l; // 循环计算给每个奖项添加style属性 list.forEach((item, i) => { // 每个奖项旋转的位置为当前 i * 平均值 + 平均值 / 2 const angle = -(i * average + half); const bigAge = l > 2 ? i * 360 / l : '0'; // 增加 style 这个是给每一个奖项增加的样式 item.style = `-webkit-transform: rotate(${-angle}deg); transform: rotate(${-angle}deg); width:${100 / l * 2}%; margin-left: -${100 / l}%; font-size:${BIGSIZE - l}px;`; //这是给每一个转盘背景新增的样式 item.style2 = `-webkit-transform: rotate(${bigAge}deg); transform: rotate(${bigAge}deg) skewY(${skewMain}deg); right:${rightBig * i}%; height:${heightBig}%; top:${topBig}%; width:${l == 1 ? 100 : 50}%; background:${item.color} ` // 记录每个奖项的角度范围 angleList.push(angle); }); return list; }; //奖品赋值到每个奖品中； function prizeAddHtml(prizeList) { console.log(prizeList) //把奖品赋值到.luckWhellBgMain let htmlBg = ''; let htmlDiv = ''; for (let i = 0, len = prizeList.length; i < len; i++) { htmlBg += `

`; htmlDiv += `

${prizeList[i].prize_name}

` } bgDom.innerHTML = htmlBg; divDom.innerHTML = htmlDiv; }; ``` 下面这段js是点击抽奖按钮的方法，这里的gift_id奖品ID我用了个随机数，一般都是从后台获取的数值，然后根据跟奖品对比，可以获取中奖ID在奖品的位置，然后冲过角度的计算旋转；isRotating这个方法是为了防止在转盘转动的时候用户重复点击；
![1663675284787.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/146de5d18b4a475cb5675c99d0795cf8~tplv-k3u1fbpfcp-watermark.image?)
码上掘金效果：https://code.juejin.cn/pen/7144150595627122701