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

转载于:https://blog.51cto.com/14168515/2372453