jQuery手機端九宮格抽獎代碼

JQuery CSS3 登錄頁 實現 獲得焦點之後 提示文字上浮的動畫效果

點擊抽獎

 $btn.click(function () {
        if (bool) {//若未按下
            bool = false;
            if (data.count > 0) {//若還有次數
                data.count--;
                $change.html(data.count);
                clickFn();
            } else {
                alert("您剩餘抽獎次數爲0，不能抽獎~");
            }
        }
    });

點擊旋轉

 function clickFn() {
        clearInterval(timer);//點擊抽獎時清除定時器
        var random = [1, 2, 3, 4, 5, 6, 7, 8];//抽獎概率
        //data爲隨機出來的結果，根據概率後的結果
        random = random[Math.floor(Math.random() * random.length)];//1-8的隨機數
        mark += random;
        mark %= 8;
        //控制概率，永遠抽不中謝謝參與
        if (mark === 3) {//抽中第一個謝謝參與則向前一位
            random++;
            mark++;
        }
        if (mark === 6) {//抽中第二個謝謝參與則向後一位
            random--;
            mark--;
        }
        //默認先轉4圈
        random += 32;//圈數 * 獎品總數
        //調用旋轉動畫
        for (var i = 1; i <= random; i++) {
            setTimeout(animate(), 2 * i * i);//第二個值越大，慢速旋轉時間越長
        }
        //停止旋轉動畫
        setTimeout(function () {
            console.log("中了" + mark);
            setTimeout(function () {
                bool = true;
                win();
            }, 1000);
        }, 2 * random * random);
    }

動畫效果

 function animate() {
        return function () {
            $blin.toggleClass("blin");//彩燈動畫
            //九宮格動畫
            length++;
            length %= 8;
            $prize.eq(length - 1).removeClass("select");
            $prize.eq(length).addClass("select");
        }
    }

在線預覽：http://www.jquery66.com/demos/js/j20194102/index.html
下載地址：https://u18725144.ctfile.com/fs/18725144-357933582