2016-12-30 8 views
0

私はスピンホイールを含むこのコードのペンプロジェクトに取り組んでいました。私はポインタがどのセグメントでどのように検出されるかを知りたい。以下はjavascriptです。私は360度を私が持っているセグメントの量で除算しなければならないと思います。事前に感謝し、私の悪い英語のために申し訳ありません。私はアルゼンチン出身です。スピニングホイールセグメント検出システム

http://codepen.io/AndreCortellini/pen/vERwmL

//set default degree (360*5) 
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; 
     totalDegree = newDegree+extraDegree; 

     /*let's make the spin btn to tilt every 
     time the edge of the section hits 
     the indicator*/ 
     $('#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 < 23.89){ 
        console.log('<<<<<<<<'); 
        $('#spin').addClass('spin'); 
        setTimeout(function() { 
         $('#spin').removeClass('spin'); 
        }, 100);  
       } 
      }, 10); 

      $('#inner-wheel').css({ 
       'transform' : 'rotate(' + totalDegree + 'deg)'   
      }); 

      noY = t.offset().top; 

     }); 
    }); 



});//DOCUMENT READY 

答えて

0

我々は最初の[0..360]度の面で学位を見つける必要があるので、我々は(totalDegree % 360)を計算します。
その後、我々は[151..210]はダークブルーでのように...つまり

[31..90] => 1, orange 
[91..150] => 2, yellow 
[151..210] => 3, dark blue 
[211..270] => 4, blue 
[271..330] => 5, cyan 
[331..30] => 0, red 

これは分割し、丸めのことを思い出す、オレンジ、[91..150]ため[31..90]スタンドは黄色であることを参照してください。(deg/60)とラウンドそれを整数にする。例:あなたが見ることができるように

31/60 = 0.516 ~ 1 
32/60 = 0.533 ~ 1 
... 
45/60 = 0.750 ~ 1 
... 
88/60 = 1.466 ~ 1 
89/60 = 1.483 ~ 1 
90/60 = 1.500 ~ 2 
91/60 = 1.516 ~ 2 
... 

、機能roundToInteger((deg/60))は完全に我々の目的に合います! JavaScriptの面では

var sector = ((totalDegree % 360)/60).toFixed(0); 
$("#txt").html(sector); 

は、あなたは天才だhttp://codepen.io/mr_nameless/pen/yVmRxW

+0

を参照してください。私はあなたなしではできなかった。ありがとうございます –

+0

あなたは歓迎です:) –

関連する問題