簡(jiǎn)易九宮格大轉(zhuǎn)盤(pán)

看了一下網(wǎng)上的lottery插件,看不懂(:3 」∠)
自己寫(xiě)了個(gè)簡(jiǎn)易的.....
測(cè)試地址

    var thisSite = 0         //當(dāng)前位置
    ,   thisCircle = 0        //當(dāng)前圈數(shù)
    ,   circle = 5            //基本轉(zhuǎn)動(dòng)圈數(shù)
    ,   timer               //計(jì)時(shí)器
    ,   count               //獎(jiǎng)品縂個(gè)數(shù)
    ,   speed = 40          //基本轉(zhuǎn)動(dòng)速度
    ,   thisSpeed           //當(dāng)前轉(zhuǎn)動(dòng)速度
    ,   prize = 8           //獎(jiǎng)品位置,從1開(kāi)始
    ,   click = true;       //鎖定開(kāi)始按鈕,默認(rèn)是true,轉(zhuǎn)動(dòng)時(shí)為false

    //點(diǎn)擊開(kāi)始按鈕執(zhí)行轉(zhuǎn)動(dòng)
    $('#btn').click(function(){
        //當(dāng)該按鈕為true的情況下才能啓動(dòng)轉(zhuǎn)動(dòng),避免轉(zhuǎn)動(dòng)時(shí)二次點(diǎn)擊
        if( click ){
            thisSpeed = speed;
            turn();
        }
    });
    //轉(zhuǎn)動(dòng)方法
    function turn(){
        var box = $('#lottery')
        ,   item = box.find('.unit');
        count = item.length;  //重新統(tǒng)計(jì)獎(jiǎng)品個(gè)數(shù)
        item.removeClass('active'); //去除所有獎(jiǎng)品的選中效果
        box.find(".unit-" + thisSite).addClass('active');  //給當(dāng)前位置增加選中效果

        if( thisSite == count ){ //當(dāng)轉(zhuǎn)過(guò)一圈后,也就是當(dāng)前位置等於獎(jiǎng)品個(gè)數(shù)時(shí)
            thisSite = 0; //當(dāng)前位置清零
            thisCircle ++; //增加圈數(shù)
        }else{
            thisSite ++;  //否則位置+1
        }

        if( thisCircle == circle && thisSite == prize ){ //當(dāng)當(dāng)前圈數(shù)等於基礎(chǔ)轉(zhuǎn)動(dòng)圈數(shù),并且當(dāng)前位置是中獎(jiǎng)位置時(shí)
            thisCircle = 0;  //當(dāng)前圈數(shù)清零
            clearTimeout(timer);  //清除計(jì)時(shí)器
            click = true;  //解除開(kāi)始按鈕的鎖定
            $('#pop').show();  //彈出獎(jiǎng)品信息
        }else{
            //轉(zhuǎn)動(dòng)速度的調(diào)整(寫(xiě)得不好,需要重新修改)
            if( thisCircle > circle/2 ){
                thisSpeed += 10;
            }else if( thisCircle > circle-1 ){
                thisSpeed += 50;
            }
            timer = setTimeout('turn()',thisSpeed);  //循環(huán)調(diào)用turn()方法
            click = false;  //開(kāi)始轉(zhuǎn)動(dòng)時(shí)鎖定開(kāi)始按鈕
        }
    };

2017年6月19日 第一次更新

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容