js实现转盘抽奖

js实现转盘抽奖

  • 一、效果图
  • 二、设计思路
  • 三、核心代码

一、效果图

js实现转盘抽奖_第1张图片

二、设计思路

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

三、核心代码

    //先建立所有奖品的集合
    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;
    } 

你可能感兴趣的:(案例,javascript)