文章目录
1.实现旋转2.控制得奖概率3. 控制旋转动画落点4.测试概率完整代码
本想找一个现成的，结果发现网上只有能实现转了，但是效果并不是让人很满意，于是我就借鉴一个样式，重新改了js实现，效果如下：
图片素材：(网上一搜就有=-=)
pointer.png
turntable.png
turntable-bg.jpg
1.实现旋转
原理很简单，就是通过css动画来实现旋转动画，用js来控制旋转度，
img[src^="turntable"] {
position: absolute;
z-index: 5;
top: 60px;
left: 116px;
transition: all 4s;
}
//配合
oTurntable.style.transform = "rotate(" +transformRotate+ "deg)";
2.控制得奖概率
控制概率,我将100当做概率，概率为 [randmArr[i-1],randmArr[i]),通过控制差值，来控制概率，当然这只是简单的demo，最好用map对象，更合理
var randmArr = [1,5,10,20,35,55,100] //概率计算为randmArr[i-1]和randmArr[i]之间
const rdm =parseInt(Math.random() * (100 - 1) + 1);//随机的数
var num = 7
console.log('rdm='+rdm);
// 统计随机数次数
if (!obj[rdm]) {
obj[rdm] = 1;
} else {
obj[rdm] ++;
}
for(var i = 0;i if(i===0){ if(rdm>=0&&rdm<=randmArr[0]){ num = i+1 break } } else { if(rdm>randmArr[i-1]&&rdm<=randmArr[i]){ num = i+1 break } } } 3. 控制旋转动画落点 虽然js是控制，单动画落点，也需要和我们所得一致，同时我们思考，一般抽奖都会固定旋转几圈，所以我们需要给个初始的旋转圈数，同时下一次旋转又是从上一次落点的基础上进行的，为了控制我们每次都是从原点开始，这样才能控制好落点和js一致，于是我设置初始圈为3圈，而第三圈为，第一次旋转后剩下度数（360-n)，这样就能达到每次都是从原点开始， nextrdm = Math.floor((num* cat)-24); //定义本次抽奖结果 var biginRotate = 2*360+(360-prevrdm) //定义默认的旋转圈数，同时补全使轮盘置零， prevrdm = nextrdm //缓存本次次的角度 transformRotate=nextrdm+biginRotate+transformRotate //本次旋转的度 oTurntable.style.transform = "rotate(" +transformRotate+ "deg)"; 4.测试概率 写是写完了，但不测试都是瞎扯淡，所以我定义了2个对象，用了记录每次所得的随机数和次数，还有中几等奖的次数 obj 和 form对象 const rdm =parseInt(Math.random() * (100 - 1) + 1);//随机的数 // 统计随机数次数 if (!obj[rdm]) { obj[rdm] = 1; } else { obj[rdm] ++; } // 统计中奖概率 if ( !form['a'+num]) { form['a'+num] = 1; } else { form['a'+num]++ } 示意图 打印发现其实随机比较公平的，但是毕竟我用的100，中奖概率还是比较大了，如果需要再小可以继续放小， 完整代码
