<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>抽奖</title>
      <style>
         #box{
            width:400px;
            height:400px;
            border:2px solid #F0AA00;
            border-radius: 50%;
            position: relative;
         }
         #point{
            position: absolute;
            width:8px;
            height:190px;
            background: #FF0000;
            left:50%;
            margin-left:-4px;
            top:10px;
            transform-origin: center bottom;
            z-index: 1;
         }
         #box span{
            display: block;
            position: absolute;
            width:2px;
            height: 200px;
            left:50%;
            margin-left: -1px;
            background: #6641E2;
            transform-origin: center bottom; 
         }
         input{
            display: block;
            /*width:400px;*/
            margin:30px 200px;
         }
      </style>
   </head>
   <body>
      <div id="box">
         <div id="point"></div>
      </div>
      <input type="button" value="抽奖" onclick="start()"/>
      <script type="text/javascript">
//       奖品几率
         var data=[
               {Rstart:"0deg",Rend:"18deg",prize:"一等奖"},
               {Rstart:"18deg",Rend:"54deg",prize:"二等奖"},
               {Rstart:"54deg",Rend:"108deg",prize:"三等奖"},
               {Rstart:"108deg",Rend:"216deg",prize:"四等奖"},
               {Rstart:"216deg",Rend:"288deg",prize:"五等奖"},
               {Rstart:"288deg",Rend:"360deg",prize:"参与奖"}
            ];
         var box=document.getElementById('box');
         var point=document.getElementById('point');
//       划分奖品区域的创建
         var i=0
//       console.log(data[0].Rend)
         while(i<data.length){
          var span=document.createElement('span');
          
          span.style.transform="rotate("+data[i].Rend+")";
          box.appendChild(span);
          i++;
         };
//       指针随机旋转角度
         function num(n,m){
            return Math.floor(Math.random()*(m+1-n))+n;
         } 
//       console.log(num(360,18000));
//       抽奖函数
         function start(){
            var angle=num(720,1800);
//          console.log(angle);
//          旋转角度  注意单位
            point.style.transform ="rotate("+angle+"deg)";
//          旋转时间
            point.style.transition=angle/360/2+"s";
//          var i=0;
//          while(i<data.length){
////            console.log(angle%360);
//             if(angle%360>=parseInt(data[i].Rstart) && angle%360<parseInt(data[i].Rend)){
//                alert(data[i].prize);
//                alert(111111);
//             }
//             i++;
//          }
//          设置一个定时器
            setTimeout(function(){
//             判断旋转得到的奖品
               for(var i=0;i<data.length;i++){
//             if(angle%360>=data[i].Rstart && angle%360<data[i].Rend){
               if(angle%360>=parseInt(data[i].Rstart) && angle%360<parseInt(data[i].Rend)){
                  alert(data[i].prize)
               }
            };
//          把角度转换到360度以内防止倒转并防止倒转
               point.style.transform ="rotate("+angle%360+"deg)";
//             console.log(angle%360);
            point.style.transition="0s";
            },angle/360/2*1000);
         }
      </script>
   </body>
</html>