js实现转盘抽奖

一、效果图

二、设计思路

• 第一步：先建立所有奖品的集合，设置默认转的圈数
• 第二步：设置转动的随机角度
• 第三步：转动到哪里就是最后的奖品，使用浏览器弹框弹出
• 第四步：设置每一个奖品转到的概率

三、核心代码

    //先建立所有奖品的集合
    var list=['免单4999元', '免单50元', '免单10元', '免单5元', '免分期服务费', '提高白条额度', '未中奖'];
    //抽奖的状态
    var isStart=true;
    //获得奖品的索引
    var index=null;
    //当前的奖品
    var nowTxt=null;
    //点击抽奖
    var pointer=document.querySelector(".pointer");
    //获取rotate
    var rotate=document.querySelector(".rotate");
    //默认转的度数
    var defaultAngle=1800;//默认转五圈
    var angle=360/list.length;
    pointer.onclick=function(){
        if(isStart){
            //开始抽奖
            isStart=false;
            index=getinfo();
            nowTxt=list[index];
            var agl=index*angle+defaultAngle+Math.random()*angle;
            rotate.style.transform="rotatez("+agl+"deg)";
            setTimeout(function(){
                alert("奖品："+nowTxt);
                isStart=true;
            },3000)
        }
    }
    function getinfo(){
        var num=Math.random();
        var i=null;
        if(num<0.03){
            i=0;
        }
        else if(num<0.1){
            i=1;
        }
        else if(num<0.2)
        {
            i=2;//10%
        }
        else if(num<0.35)
        {
            i=3;//15%
        }
        else if(num<0.55)
        {
            i=4;//20%
        }
        else if(num<0.85)
        {
            i=5;//30%
        }
        else{
            i=6;
        }
        return i;
    }