一个简单的转盘效果

Posted 2020-08-19

 主要代码：

  1 /**
  2  * Created by Administrator on 2016/7/25.
  3  */
  4 $(function(){
  5     var $start=$(".zhuanpan .start-zp");
  6     var $zp=$(".zhuanpan .zp-wp");
  7 
  8     //初始话旋转次数变量;
  9     var count=1;
 10     //上限次数
 11     var limit=3;
 12 
 13 
 14     //各奖项的角度
 15     var eachDeg=[0,-50,-90,-130,-180,-220,-260,-310];
 16     //各奖项的描述
 17     var eachContent=["金币50个","金币100个","谢谢参与","再来一次","抵用券5元","抵用券10元","金币5个","金币10个"];
 18     //各奖项的概率区间
 19     var GL=[0.03,0.05,0.45,0.65,0.75,0.82,0.9,1];
 20 
 21     //各奖项的回调函数
 22     function cb0(){
 23         alert("回调cb0");
 24     }
 25 
 26     function cb1(){
 27         alert("回调cb1");
 28     }
 29 
 30     function cb2(){
 31         alert("回调cb2");
 32     }
 33 
 34     function cb3(){
 35         limit++;
 36         alert("回调cb3");
 37     }
 38 
 39     function cb4(){
 40         alert("回调cb4");
 41     }
 42 
 43     function cb5(){
 44         alert("回调cb5");
 45     }
 46 
 47     function cb6(){
 48         alert("回调cb6");
 49     }
 50 
 51     function cb7(){
 52         alert("回调cb7");
 53     }
 54 
 55 
 56     var cbArray=[cb0,cb1,cb2,cb3,cb4,cb5,cb6,cb7];
 57 
 58     var clickFlag=false;
 59 
 60     $start.click(function(){
 61         console.log(count+" "+limit);
 62         if(clickFlag==false){
 63             clickFlag=true;
 64             setTimeout(function(){
 65                 clickFlag=false;
 66             },4000);
 67             if(count<=limit){
 68                 //定义一个随机概率
 69                 var random=Math.random();
 70                 //声明数组的index
 71                 var index=0;
 72                 //根据概率得到index
 73                 for(var i=0; i<8;i++){
 74                     if(random>GL[i]&&random<=GL[i+1]){
 75                         index=i+1;
 76                     }
 77                 }
 78                 //触发旋转动画
 79                 $zp.children().css({"transform":"rotate("+(eachDeg[index]-1080*count)+"deg)"});
 80                 setTimeout(function(){
 81                     //弹出对话框
 82                     if(index==2){
 83                         alert("很遗憾，谢谢惠顾");
 84                     }else if(index==3){
 85                         alert("恭喜您，再来一次");
 86                     }else{
 87                         alert("恭喜您获得"+eachContent[index]);
 88                     }
 89                     //执行函数
 90                     cbArray[index]();
 91                 },4000);
 92 
 93                 count++;
 94             }else{
 95                 alert("你的次数已用完");
 96                 clickFlag=false;
 97             }
 98         }
 99     });
100 })

 

演示地址  

demo下载