jQuery手机端九宫格抽奖代码

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值