簡易九宮格大轉盤

看了一下網上的lottery插件,看不懂(:3 」∠)
自己寫了個簡易的.....
測試地址

    var thisSite = 0         //當前位置
    ,   thisCircle = 0        //當前圈數
    ,   circle = 5            //基本轉動圈數
    ,   timer               //計時器
    ,   count               //獎品縂個數
    ,   speed = 40          //基本轉動速度
    ,   thisSpeed           //當前轉動速度
    ,   prize = 8           //獎品位置,從1開始
    ,   click = true;       //鎖定開始按鈕,默認是true,轉動時為false

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

        if( thisSite == count ){ //當轉過一圈后,也就是當前位置等於獎品個數時
            thisSite = 0; //當前位置清零
            thisCircle ++; //增加圈數
        }else{
            thisSite ++;  //否則位置+1
        }

        if( thisCircle == circle && thisSite == prize ){ //當當前圈數等於基礎轉動圈數,并且當前位置是中獎位置時
            thisCircle = 0;  //當前圈數清零
            clearTimeout(timer);  //清除計時器
            click = true;  //解除開始按鈕的鎖定
            $('#pop').show();  //彈出獎品信息
        }else{
            //轉動速度的調整(寫得不好,需要重新修改)
            if( thisCircle > circle/2 ){
                thisSpeed += 10;
            }else if( thisCircle > circle-1 ){
                thisSpeed += 50;
            }
            timer = setTimeout('turn()',thisSpeed);  //循環調用turn()方法
            click = false;  //開始轉動時鎖定開始按鈕
        }
    };

2017年6月19日 第一次更新

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容