來、來、來自己寫——九宮格轉盤

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

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

 

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

計划：

• 晚上寫靜態頁面
• 明早寫js

晚上搞定了靜態界面，如下：

 

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

這里就不貼代碼了，結尾我會附上頁面鏈接，如果有好的建議，希望得到大神的指點。

 

 

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

大致思路如下：

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

var turnOrder = ['bg-3','bg-6','bg-9','bg-8','bg-7','bg-4','bg-1','bg-2'];
var turnDom = [];
for(var i = 0;i < turnOrder.length; i++){
    turnDom.push($('.'+turnOrder[i]));
}
function goScroll(i){if(i==8)  i = 0;
    turnDom[i].addClass('active');
    setTimeout(function(){
                    turnDom[i].removeClass('active');
                    i++;
                    goScroll(i);
              },500);
}

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

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

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

$(document).on('click', '[data-action]', function(e){
    var $this = $(this),
        action = $this.data('action');
    switch(action){
        case 'start':
            var speed = Math.floor(Math.random()*150) + 200;//350-200的范圍
            goScroll(0,  speed, 0.8);
            break;
    }
});

function goScroll(i, speed, mul){
    if(speed < 30) mul = 1.1;
    if(i==8)  i = 0;
    turnDom[i].addClass('active');
    if(speed > 350) {//結束
        turnDom[i].addClass('active');
        scrolling = false;
        openResult(i);
        return;
    }
    setTimeout(function(){
                    turnDom[i].removeClass('active');
                    i++;
                    speed = speed * mul;
                    goScroll(i, speed, mul);
              },speed);
}

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

這樣速度就慢慢變快了，當速度小於30毫秒，乘數為1.1，速度慢慢就變慢了，當速度大於350時，停止並公布結果。這里的結果速度

一定要大於初始的隨機速度，否則會出現直接輸出結果。

 

到目前為止還不完善，現在每一種的結果隨機幾率並不平均，開始轉動后、也沒有阻止轉動按鈕。

還是直接貼代碼：

var scrolling = false;//是否在轉
var who;
function setWho(){
    who = Math.floor(Math.random()*9);
    if(who == 8) who = 0;
}

$(document).on('click', '[data-action]', function(e){
    var $this = $(this),
        action = $this.data('action');
    switch(action){
        case 'start':
            if(scrolling==true) return;
            setWho();
            var speed = Math.floor(Math.random()*150) + 200;//350-200的范圍
            scrolling = true;
            goScroll(0,  speed, 0.8);
            break;
    }
});

function goScroll(i, speed, mul){
    if(speed < 30) mul = 1.1;
    if(i==8)  i = 0;
    turnDom[i].addClass('active');
    if(speed > 350 && who==i) {//結束
        turnDom[i].addClass('active');
        scrolling = false;
        openResult(i);
        return;
    }
    setTimeout(function(){
                    turnDom[i].removeClass('active');
                    i++;
                    speed = speed * mul;
                    goScroll(i, speed, mul);
              },speed);
}

setWho用來確定結果（這里給自己公司的軟件的概率+1，也就是九分之二的概率，不過分撒 O(∩_∩)O ...），isScrolling，確定是否正在轉動。

 

嗯，大致比較重要的邏輯就是這些了。當然還有部分都沒貼出來，如果需要，可以到實際項目里去看，那么來看看效果吧！》點這里《

 

》github地址《