纯js+css大转盘抽奖

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;
};