JS九宫格抽奖代码案例

一、JS九宫格抽奖案例1
注：此案例，来着同行整理，jquery版本效果
<!DOCTYPE html>
<html>
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        li {
            width: 200px;
            height: 200px;
        }
        
        .ul {
            width: 606px;
            height: 606px;
        }
        
        .ul li {
            float: left;
            border: 1px solid #000000;
            list-style: none;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
        }
    </style>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
 
    <body>
        <div class="ul">
            <li class="li1">1</li>
            <li class="li2">2</li>
            <li class="li3">3</li>
            <li class="li8">8</li>
            <li class="listart">开始</li>
            <li class="li4">4</li>
            <li class="li7">7</li>
            <li class="li6">6</li>
            <li class="li5">5</li>
        </div>

        <script>
            var last_index = 0, //上一回滚动的位置
                amplification_index = 0, //轮盘的当前滚动位置,0表示为第一次
                roll_flag = true, //是否允许滚动
                max_number = 8, //轮盘的全部数量
                speed = 300, //速度，速度值越大，则越慢 初始化为300
                finalindex = 2, //最终的奖励
                myInterval = "", //定时器
                max_speed = 40, //滚盘的最大速度
                minturns = 8, //最小的圈数为2
                runs_now = 0; //当前已跑步数
            $(".listart").bind("click", function() {
                //初始化步数
                runs_now = 0;
                //当前可以点击的状态下
                if(roll_flag) {
                    roll_flag = false;
                    //启动滚盘，注，若是最终后台无返回就不好意思里
                    rolling();
                }
            });
 
            //滚动轮盘的动画效果
            function rolling() {
                myInterval = setTimeout(function() {
                    rolling();
                }, speed);
                runs_now++; //已经跑步数加一
                amplification_index++; //当前的加一
                //获取总步数，接口延迟问题，所以最后还是设置成1s以上
                var count_num = minturns * max_number + finalindex - last_index;
                console.log(count_num);
                //上升期间
                if(runs_now <= (count_num / 3) * 2) {
                    speed -= 30; //加速
                    if(speed <= max_speed) {
                        speed = max_speed; //最高速度为40；
                    }
                }
                //抽奖结束
                else if(runs_now >= count_num) {
                    clearInterval(myInterval);
                    last_index = amplification_index;
                    roll_flag = true;
                }
                //下降期间
                else if(count_num - runs_now <= 10) {
                    speed += 20;
                }
                //缓冲区间
                else {
                    speed += 10;
                    if(speed >= 100) {
                        speed = 100; //最低速度为100；
                    }
                }
                if(amplification_index > max_number) { //判定！是否大于最大数
                    amplification_index = 1;
                }
 
                //刷新页面
                var strli = ".li";
                strli += amplification_index;
                //全部清除
                $("li").each(function() {
                    $(this).css("background", "#ffffff");
                })
                //画颜色
                $(strli).css("background", "red");
            }
        </script>
    </body>
 
</html>
View Code