【來、來、來本身寫——九宮格轉盤】

五一告急，4月29日接到小任務，放假前作個九宮格轉盤小頁面，噢~~設計稿已出，當前時間下午兩點，

正在改bug，主流項目30日得上線，九宮格30日中午得上線。時間略緊下午6點改完bug，加班搞九宮格。



一個頁面，三屏內容，九宮格、結果彈窗和分享提示。

計劃：

晚上寫靜態頁面
明早寫js
晚上搞定了靜態界面，以下：  
 

 

html、css方面，寬度用320px（主要用於移動端），主體內容絕對定位，我以爲目前的寫法仍是不錯，

這裏就不貼代碼了，結尾我會附上頁面連接，若是有好的建議，但願獲得大神的指點。

JS方面，由於不想到網上去下載別人的代碼，也沒時間去研究別人的好的實現方式，就本身隨便寫了個。

大體思路以下：

1.先實現勻速轉動：把執行順序存入數組，setTimeout重複調用，改變當前active位置（這裏的命名有點坑請忽略）：

1. var turnOrder = ['bg-3','bg-6','bg-9','bg-8','bg-7','bg-4','bg-1','bg-2'];
   

2. var turnDom = [];
   

3. for(var i = 0;i < turnOrder.length; i++){
   

4.     turnDom.push($('.'+turnOrder[i]));
   

5. }
   

6. function goScroll(i){if(i==8)  i = 0;
   

7.     turnDom[i].addClass('active');
   

8.     setTimeout(function(){
   

9.                     turnDom[i].removeClass('active');
   

10.                     i++;
    

11.                     goScroll(i);
    

12.               },500);
    

13. }

複製代碼

2.實現先加速、再減速、最後得出結果。

加速和減速須要用setTImeout的延遲控制，加速或者減速須要用延遲範圍來判斷。

爲方便理解，我先直接提代碼：

1. $(document).on('click', '[data-action]', function(e){
   

2.     var $this = $(this),
   

3.         action = $this.data('action');
   

4.     switch(action){
   

5.         case 'start':
   

6.             var speed = Math.floor(Math.random()*150) + 200;//350-200的範圍
   

7.             goScroll(0,  speed, 0.8);
   

8.             break;
   

9.     }
   

10. });
    

11. 
    

12. function goScroll(i, speed, mul){
    

13.     if(speed < 30) mul = 1.1;
    

14.     if(i==8)  i = 0;
    

15.     turnDom[i].addClass('active');
    

16.     if(speed > 350) {//結束
    

17.         turnDom[i].addClass('active');
    

18.         scrolling = false;
    

19.         openResult(i);
    

20.         return;
    

21.     }
    

22.     setTimeout(function(){
    

23.                     turnDom[i].removeClass('active');
    

24.                     i++;
    

25.                     speed = speed * mul;
    

26.                     goScroll(i, speed, mul);
    

27.               },speed);
    

28. }

複製代碼

向自調函數goScroll傳入速度和乘數，speed隨機範圍我設置爲350-200毫秒，初始乘數是0.8，每次自調用speed和mul相乘，

這樣速度就慢慢變快了，當速度小於30毫秒，乘數爲1.1，速度慢慢就變慢了，當速度大於350時，中止並公佈結果。這裏的結果速度

必定要大於初始的隨機速度，不然會出現直接輸出結果。

到目前爲止還不完善，如今每一種的結果隨機概率並不平均，開始轉動後、也沒有阻止轉動按鈕。

仍是直接貼代碼：

1. var scrolling = false;//是否在轉
   

2. var who;
   

3. function setWho(){
   

4.     who = Math.floor(Math.random()*9);
   

5.     if(who == 8) who = 0;
   

6. }
   

7. 
   

8. $(document).on('click', '[data-action]', function(e){
   

9.     var $this = $(this),
   

10.         action = $this.data('action');
    

11.     switch(action){
    

12.         case 'start':
    

13.             if(scrolling==true) return;
    

14.             setWho();
    

15.             var speed = Math.floor(Math.random()*150) + 200;//350-200的範圍
    

16.             scrolling = true;
    

17.             goScroll(0,  speed, 0.8);
    

18.             break;
    

19.     }
    

20. });
    

21. 
    

22. function goScroll(i, speed, mul){
    

23.     if(speed < 30) mul = 1.1;
    

24.     if(i==8)  i = 0;
    

25.     turnDom[i].addClass('active');
    

26.     if(speed > 350 && who==i) {//結束
    

27.         turnDom[i].addClass('active');
    

28.         scrolling = false;
    

29.         openResult(i);
    

30.         return;
    

31.     }
    

32.     setTimeout(function(){
    

33.                     turnDom[i].removeClass('active');
    

34.                     i++;
    

35.                     speed = speed * mul;
    

36.                     goScroll(i, speed, mul);
    

37.               },speed);
    

38. }

複製代碼

setWho用來肯定結果（這裏給本身公司的軟件的機率+1，也就是九分之二的機率，不過度撒 O(∩_∩)O ...），isScrolling，肯定是否正在轉動。

嗯，大體比較重要的邏輯就是這些了。固然還有部分都沒貼出來，若是須要，能夠到實際項目裏去看，那麼來看看效果吧！》點這裏《