js轮盘抽奖

js轮盘抽奖

需求：实现中奖是否可控

思路：通过旋转角度来实现轮盘转动，根据角度来确定是否中奖

 window.onload = function(){

     var oTurn = document.getElementById('turntable');
     var oStart = document.getElementById('start');
     var timer, timer2 = null;
     var deg = 0;    //当前旋转度数
     var iSpeed = 0;    //加速减速变量
     var iNum = 1800;    //旋转角度（旋转多少圈360*i）
     var iZ = 45+60*1;    //可中奖的值(15+60*i), 不中奖的值(45+60*i)
     var iTotal = iNum + iZ;    //总共旋转度数
     var bStop = true;    //可点击开关
     var iTp = 0;        //保存下一次旋转需要的总度数
     var bFirst = true;    //是否第一次点击

     oStart.onclick = function(){
         start();
     };

     function start(){
         if(bStop){
             bStop = false;

             timer = setInterval(function(){
                 //第一次点击，小于总度数的一半时加速，大于一半是减速,速度小于0时，默认为0.5
                 if(bFirst){
                     if(deg<=iTotal/2){
                         iSpeed = iSpeed + 0.1;
                     }
                     if(deg>iTotal/2){
                         iSpeed -= 0.1;
                     }
                     if(iSpeed <= 0){
                         iSpeed = 0.5;
                     }
                 }else{
                     if(deg<=iTp/2){
                         iSpeed = iSpeed + 0.1;
                     }
                     if(deg>iTp/2){
                         iSpeed -= 0.1;

                     }
                     if(iSpeed <= 0){
                         iSpeed = 0.5;
                     }
                 }

                 deg+=iSpeed;    //每次旋转度数=当前度数+ 速度变量(速度快，旋转快，即加速运动；速度慢，减速运动)

                 //当前度数大于等于总度数是停止
                 if(deg>=iTotal){
                     clearInterval(timer);
                     deg%=360;                //设置
                     iTp = iTotal + deg;        //下一次旋转的总度数
                     iSpeed = 0;                //重置
                     bFirst = false;
                     bStop = true;
                     return false;
                 }else{
                     $('#turntable').css({'-webkit-transform':'rotate(' + deg + 'deg)'});
                 }

             }, 30);
         }
     }

 };