簡體   English   中英

我的 JQuery 代碼有什么錯誤嗎? 點擊開始后抽獎只能移動一步

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

<!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, you got 1”。 代碼中的任何錯誤導致它沒有前進??? 它應該滾動幾個圓圈然后減速然后停止並彈出警報框。

這是賦值,不是比較:

if (activeIndex = max)

使用==

if (activeIndex == max)
if (activeIndex = max) {

這是每次都將 activeIndex 設置為 max,因此nextIndex將始終為 1。

if (activeIndex == max) {

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM