javascript - 转轮结果已被控制

Question

我正在使用此代码创建一个纺车。但我想控制结果。例如，我想要的奖金 10000 美元，百分比较低。所以，不是任何人都能得到五百分之一的人。我不知道如何为他们设置百分比。如果有人可以提供帮助，我将不胜感激。先感谢您。如果您能给我任何提示以帮助我继续并知道下一步该做什么。

这是我用过的代码

我更新了整个代码以增加随机概率。此外，我还增加了更多奖品。现在我的设计和概率本身有问题。此外，代码很长。我希望你能帮助我解决概率和设计问题

    //set default degree (360*5)
  // I TRIED FOR 12 PRIZES TO MULTIPLY 360*11 BUT NOTHING CHANGES
var degree = 1800;
//number of clicks = 0
var clicks = 0;

$(document).ready(function(){
    
    /*WHEEL SPIN FUNCTION*/
    $('#spin').click(function(){
        
        //add 1 every click
        clicks ++;
        
        /*multiply the degree by number of clicks
      generate random number between 1 - 360, 
    then add to the new degree*/
        var newDegree = degree*clicks;
        var extraDegree = Math.floor(Math.random() * (360 -1+1 )+1);
        
        if(extraDegree =0.05)
        {
            
            var newextraDegree=Math.floor(Math.random() * (30 -1+1 )+1);
            totalDegree = newDegree+newextraDegree;
            
                $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
        }
        else if(extraDegree =0.05)
        {
            var newextraDegree=Math.floor(Math.random() * (60 -30+1 )+30);
            totalDegree = newDegree+newextraDegree;
            
                $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
        }
        else if (extraDegree =0.10)
            {
                var newextraDegree=Math.floor(Math.random() * (90 -60+1 )+60);
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        else if (extraDegree =5)
            {
                var newextraDegree=Math.floor(Math.random() * (120 -90+1 )+90)
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        else if (extraDegree =5)
            {
                var newextraDegree=Math.floor(Math.random() * (150 -120+1 )+120);
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        else if (extraDegree =5)
            {
                var newextraDegree=Math.floor(Math.random() * (180 -150+1 )+150)
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        else if (extraDegree =5)
            {
                var newextraDegree=Math.floor(Math.random() * (210 -180+1 )+180)
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        else if (extraDegree =13)
            {
                var newextraDegree=Math.floor(Math.random() * (240 -210+1 )+210)
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        else if (extraDegree =16)
            {
                var newextraDegree=Math.floor(Math.random() * (270 -240+1 )+240)
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        else if (extraDegree =16)
            {
                var newextraDegree=Math.floor(Math.random() * (300 -270+1 )+270);
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        else if (extraDegree =16.8)
            {
                var newextraDegree=Math.floor(Math.random() * (330 -300+1 )+300)
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        else if (extraDegree =18)
            {
                var newextraDegree=Math.floor(Math.random() * (360 -330+1 )+330)
            totalDegree = newDegree+newextraDegree;
                
                    $('#wheel .sec').each(function(){
            var t = $(this);
            var noY = 0;
            
            var c = 0;
            var n = 700;    
            var interval = setInterval(function () {
                c++;                
                if (c === n) { 
                    clearInterval(interval);                
                }   
                    
                var aoY = t.offset().top;
                $("#txt").html(aoY);
                console.log(aoY);
                
                /*23.7 is the minumum offset number that 
                each section can get, in a 30 angle degree.
                So, if the offset reaches 23.7, then we know
                that it has a 30 degree angle and therefore, 
                exactly aligned with the spin btn*/
                if(aoY < 11.94){
                    console.log('<<<<<<<<');
                    $('#spin').addClass('spin');
                    setTimeout(function () { 
                        $('#spin').removeClass('spin');
                    }, 100);    
                }
            }, 10);
            
            $('#inner-wheel').css({
                'transform' : 'rotate(' + totalDegree + 'deg)'          
            });
         
            noY = t.offset().top;
            
        });
            }
        
        
        
        
        
        /*let's make the spin btn to tilt every
        time the edge of the section hits 
        the indicator*/
    
    });
    
    
    
});//DOCUMENT READY
    

    #awardPanel {
padding:10px;
color:green;
text-align:center;
}

    *{  margin:0;   padding:0; }

body{
    background:#eaeaea;
    color:#fff;
    font-size:18px;
    font-family: 'Exo 2', sans-serif;
}

a{
    color:#34495e;  
}




/*WRAPPER*/
#wrapper{ 
    margin: 40px auto 0;    
    width:266px; 
    position:relative;
}

#txt{
    color:#eaeaea;  
}


/*WHEEL*/
#wheel{
    width:250px;
    height:250px;
    border-radius:50%;  
    position:relative;
    overflow:hidden;
    border:8px solid #fff;
    box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
    transform: rotate(0deg);
}

#wheel:before{
    content:'';
    position:absolute;
    border:4px solid rgba(0,0,0,0.1);
    width:242px;
    height:242px;
    border-radius:50%;
    z-index:1000;   
}

#inner-wheel{
    width:100%;
    height:100%;
    
    -webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
    -moz-transition:    all 6 cubic-bezier(0,.99,.44,.99);
    -o-transition:      all 6s cubic-bezier(0,.99,.44,.99);
    -ms-transition:     all 6s cubic-bezier(0,.99,.44,.99);
    transition:         all 6s cubic-bezier(0,.99,.44,.99); 
}

#wheel div.sec{
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 130px 75px 0;
    border-color: #19c transparent;
    transform-origin: 75px 129px;
    left:50px;
    top:-4px;   
    opacity:1;
}

#wheel div.sec:nth-child(1){
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  border-color: blue transparent;  
}
#wheel div.sec:nth-child(2){
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  border-color: white transparent;  
}
        
        
#wheel div.sec:nth-child(3){
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  border-color: blue transparent;  
}
#wheel div.sec:nth-child(4){
  transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  border-color: white transparent;  
}
#wheel div.sec:nth-child(5){
  transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -o-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  border-color: blue transparent;  
}
#wheel div.sec:nth-child(6){
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  border-color: white transparent;  
}
        #wheel div.sec:nth-child(7){
  transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  border-color: blue transparent;  
}
        #wheel div.sec:nth-child(8){
  transform: rotate(240deg);
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -o-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  border-color: white transparent;  
}
        #wheel div.sec:nth-child(9){
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  border-color: blue transparent;  
}
        #wheel div.sec:nth-child(10){
  transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -o-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  border-color: white transparent;  
}
        #wheel div.sec:nth-child(11){
  transform: rotate(330deg);
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -o-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  border-color: blue transparent;  
}
        #wheel div.sec:nth-child(12){
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  border-color: white transparent;  
}

        

#wheel div.sec .fa{
    margin-top: -100px;
    color: rgba(0,0,0,0.2);
    position: relative;
    z-index: 10000000;
    display: block;
    text-align: center;
    font-size:16px;
    margin-left:-15px;
    
    text-shadow: rgba(255, 255, 255, 0.1) 0px -1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 0px;
}




#spin{
    width:68px;
    height:68px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-34px 0 0 -34px;
    border-radius:50%;
    box-shadow:rgba(0,0,0,0.1) 0px 3px 0px;
    z-index:1000;
    background:#fff;
    cursor:pointer;
    font-family: 'Exo 2', sans-serif;
  
  -webkit-user-select: none; 
  -moz-user-select: none;    
  -ms-user-select: none;     
  -o-user-select: none;
  user-select: none;   
}


#spin:after{
    content:"SPIN"; 
    text-align:center;
    line-height:68px;
    color:#CCC;
    text-shadow: 0 2px 0 #fff, 0 -2px 0 rgba(0,0,0,0.3) ;
    position: relative;
    z-index: 100000;
    width:68px;
    height:68px;
    display:block;
}

#spin:before{
    content:"";
    position:absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 28px 20px;
    border-color: transparent transparent #ffffff transparent;
    top:-12px;
    left:14px;
}

#inner-spin{
    width:54px;
    height:54px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-27px 0 0 -27px;
    border-radius:50%;
    background:red;
    z-index:999;
    box-shadow:rgba(255,255,255,1) 0px -2px 0px inset, rgba(255,255,255,1) 0px 2px 0px inset,  rgba(0,0,0,0.4) 0px 0px 5px ;
    
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    
}

#spin:active #inner-spin{
    box-shadow:rgba(0,0,0,0.4) 0px 0px 5px inset;
}

#spin:active:after{
    font-size:15px; 
}



#shine{
    width:250px;
    height:250px;
    position:absolute;
    top:0;
    left:0;
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 1%, rgba(255,255,255,0.91) 9%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(1%,rgba(255,255,255,0.99)), color-stop(9%,rgba(255,255,255,0.91)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 1%,rgba(255,255,255,0.91) 9%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


opacity:0.1;
    
}



/*ANIMATION*/
@-webkit-keyframes hh {
  0%, 100%{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }

  50%{
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

@keyframes hh {
   0%, 100%{
    transform: rotate(7deg);
    -webkit-transform: rotate(0deg);
  }

  50%{
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
}

.spin {
  -webkit-animation: hh 0.1s; /* Chrome, Safari, Opera */
    animation: hh 0.1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
        <div id="wrapper">
            <div id="wheel">
                <div id="inner-wheel">
                    <div class="sec"><span class="fa" style="font-size: 16px;">$10000</span></div>
                        <div class="sec"><span class="fa" style="font-size: 16px;">$8000</span></div>
                        <div class="sec"><span class="fa" style="font-size: 16px;" >$6000</span></div>
                        <div class="sec"><span class="fa" style="font-size: 16px;" >$4000</span></div>
                    <div class="sec"><span class="fa" style="font-size: 16px;">$2000</span></div>
                    <div class="sec"><span class="fa" style="font-size: 16px;">$1000</span></div>
                    <div class="sec"><span class="fa" style="font-size: 16px;">$500</span></div>
                        <div class="sec"><span class="fa" style="font-size: 16px;">$300</span></div>
                        <div class="sec"><span class="fa" style="font-size: 16px;" >$100</span></div>
                        <div class="sec"><span class="fa" style="font-size: 16px;" >$50</span></div>
                    <div class="sec"><span class="fa" style="font-size: 16px;">10% off</span></div>
                    <div class="sec"><span class="fa" style="font-size: 16px;">free spin</span></div>
                
                </div>
                            <div id="spin">
                                <div id="inner-spin"></div>
                            
                        
                    <div id="shine"></div>
                </div>
                <div id="txt"></div>
            </div>
        </div>
    </div>

现在假设例如我想获得一个介于 1 和 360 之间的随机数和Math.floor(Math.random() * (360 -1+1 )+1) 现在我想从 100 中创建一个概率，如果数字在 1 到 30 之间，则概率为 0.05，如果数字在 30 到 60 之间，则概率为 0.05，如果数字在 60 到 90 之间，则概率为0.10，如果数字在 90 和 120 之间，概率将为 5，如果数字在 120 和 150 之间，概率将为 5，如果数字在 150 和 180 之间，概率将为 5，如果数字在 180 之间和 210 概率为 5，如果数字在 210 到 240 之间，概率为 13，如果数字在 240 到 270 之间，概率为 16，如果数字在 270 到 300 之间，概率为 16，如果数字在 300 和 330 之间，则概率为 16.8，如果数字在 330 和 360 之间，则概率为 18，(0.05+0.05+0.10+5+5+5+5+13+16+16+16.8+18=100) 我怎样才能做到这一点

标签： javascriptjquerycssrandomprobability

Answer 1

由于您的代码的第二个版本在我可以提供的时间内进行编辑的方式很长，因此我写了一个简短的示例，说明如何定义您的价目表并选择中奖价格。

此示例使用具有概率的可能价格列表并创建它们的加权列表。从该列表中选择一个随机项目，该项目标识中奖价格。

之后，计算转动车轮的角度以到达所选价格中的随机位置（从 0° 开始）

// Define the prices and probabilities
const prices = [
    {value: "Nothing", probability: 0.5},
    {value: "Free Spin", probability: 0.2},
    {value: "10$", probability: 0.15},
    {value: "50$", probability: 0.1},
    {value: "100$", probability: 0.04},
    {value: "1000$", probability: 0.01},
];

// The angle one the wheel one area uses (uniform sizes)
var priceAngle = 360 / prices.length;

var result = prices[0];

// Generate a list of the indices based on the probabilities
var weightedList = [];
for (let i=0; i < prices.length; i++)
{
    for (let j=0; j < prices[i].probability*100; j++)
    {
        weightedList.push(i);
    }
}

// Get a random index from the weightedList and use it to get the price
var winningPriceIndex = weightedList[Math.floor(Math.random() * weightedList.length)];
result = prices[winningPriceIndex];

// Full spins the wheel shoud turn (min. 1, max. 5)
var fullSpins = Math.floor(Math.random() * 4)+1;
// Offset from 0° to the start of the price
var offsetToPrice = winningPriceIndex * priceAngle;
// Random offset from the start of the price
var additionalOffset = Math.floor(Math.random() * priceAngle);

console.log("The wheel turns " + (fullSpins * 360 + offsetToPrice + additionalOffset) 
    + "° (" + fullSpins + " full spin + " + offsetToPrice + "° + " + additionalOffset + "°)");
console.log('You won: ' + result.value);

这可能不是性能最好的解决方案，但它应该让您了解如何解决您的问题。