我的 JQuery 代码中有什么错误吗?彩票只能在点击开始后移动一步

Any error in my JQuery code? The lottory can only move one step after click start

本文关键字：开始移动一步代码 JQuery 什么错误彩票我的更新时间：2023-09-26

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lottery</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            position: absolute;
            top: 0;
            left:0;
            width: 100%;
            height: 100%;
            background: #333;
        }
        .nine{
            position: relative;
            margin: 20px auto;
            height: 300px;
            width: 300px;
        }
        .items{
            background: #eee;
            border-radius: 50px;
            width: 80px;
            height: 80px;
            text-align: center;
        }
        .active{
            background-color: red;
            color: #fff;
            box-shadow: 0 0 16px rgba(33,154,219,.8), 0 1px 2px rgba(0,0,0,.2) ;
        }
        .btn-start{
            background-color: #3385ff;
            cursor: pointer;
            color: #fff
        }
    </style>
</head>
<body>
    <div class="container">
        <table class="nine">
            <tbody>
                <tr>
                    <td class="items" data-index="1">1</td>
                    <td class="items" data-index="2">2</td>
                    <td class="items" data-index="3">3</td>
                </tr>
                <tr>
                    <td class="items active" data-index="8">8</td>
                    <td class="items btn-start" data-index="9">start</td>
                    <td class="items" data-index="4">4</td>
                </tr>
                <tr>
                    <td class="items" data-index="7">7</td>
                    <td class="items" data-index="6">6</td>
                    <td class="items" data-index="5">5</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        var gRunning = false;
        $(".btn-start").click(function(e){
            if(gRunning){
                return;
            }
            gRunning = true;
            next(parseInt(Math.random()*50));
        });
        function next(time){
            var activeItem = $(".items.active"),
                activeIndex = activeItem.data("index"),
                max = $(".items").length -1,
                nextTime = time + 5* time/50,
                nextIndex = 1,
                nextItem = null;
            if (activeIndex = max) {
                nextIndex = 1;
            }
            else{
                nextIndex = activeIndex + 1;
            }
            activeItem.removeClass("active");
            nextItem = $(".items[data-index="+nextIndex+"]").addClass("active");
            if (time>800) {
                gRunning = false;
                var info = nextItem.text();
                alert("Congrats, you got "+ info);
            }
            else{
                window.setTimeout(function(){
                    next(nextTime);
                },nextTime);
            }
        }
    </script>
</body>
</html>

此代码在我单击"开始"按钮后停止在data-index：1，然后过了一会儿，警报框将弹出，"congrants，你得到了1"。代码中的任何错误都会导致它无法前进???它应该滚动几个圆圈，然后减速，然后停止并弹出警报框。

if (activeIndex = max) {

这是每次都将 activeIndex 设置为 max，因此nextIndex将始终为 1。

用

if (activeIndex == max) {

这是赋值，不是比较：

if (activeIndex = max)

使用==

if (activeIndex == max)