我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
ps:以前用vue写过css大转盘抽奖，当时对4个奖品以下的转盘样式会错乱，在这里已修复这个问题；
1.html编写；
为了能自适应奖品个数，我把背景图以及奖品做了分开，class="luckWhellBgMain"这个div是放入背景的容器;
class="wheel-main"这个div是放大转盘的容器；class="prize_point"这个div是放抽奖点击的按钮，当大转盘转动的时候，这个是固定的；
2.css编写
css的样式基本上可以根据自己的容器进行样式编写；主要是这个.rotateStyle样式，这里运用了css3的transition动画效果，在js中我们只需要改变transfrom的样式就好了；
3.js编写
这一段主要是定义各种变量，因为奖品里面一般都有文字，这里定义了最大字体为24号字，这里面的data是奖项个数的存储，这个奖项是可以随意改变的，可以是从后台动态获取再赋值；
下面的这段代码是把样式赋值到html中，一开始通过循环把样式赋值到奖品的数组中；一个是style2为背景的样式，这个样式加入可以做到奖品在4个一下样式不会错乱，style为大转盘的样式，给每个样式旋转角度，这样才能完整对应到大转盘中，angleList这个是记录旋转的角度，当有多次抽奖的时候可以从这个角度计算增加旋转的角度；
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 += `<div class="luckWhellSector" style="${prizeList[i].style2}"></div>`;
htmlDiv += `<div class="prize-item" style="${prizeList[i].style}">
<div>
${prizeList[i].prize_name}
</div>
<div style="padding-top:5px;">
<img src=" ${prizeList[i].img}" style="width:45%"/>
</div>
</div>`
}
bgDom.innerHTML = htmlBg;
divDom.innerHTML = htmlDiv;
};
下面这段js是点击抽奖按钮的方法，这里的gift_id奖品ID我用了个随机数，一般都是从后台获取的数值，然后根据跟奖品对比，可以获取中奖ID在奖品的位置，然后冲过角度的计算旋转；isRotating这个方法是为了防止在转盘转动的时候用户重复点击；
码上掘金效果：code.juejin.cn/pen/7144150…
