Verwenden Sie jQuery, um eine einfache Lotterie mit neun Quadraten zu implementieren-js-Tutorial-php.cn

Verwenden Sie jQuery, um eine einfache Lotterie mit neun Quadraten zu implementieren

不言

Freigeben： 2018-07-05 17:31:24

Original

2067 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung von jQuery zur Implementierung einer einfachen Neun-Quadrat-Raster-Lotterie vor. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            height: 600px;
            border: 2px solid black;
            margin: 0 auto;
            border: 2px solid black;

        }

        table td {
            border: 2px solid black;
            width: 200px;
            text-align: center;
        }

        p {
            text-align: center;
            height: 10px;
        }

        span {
            color: red;
        }

        #star {
            /* background: gray; */
            font-size: 20px;
        }

        .cj.back {
            background: orange;
        }

        div {
            height: 20px;
            text-align: center;
        }
    </style>

</head>

<body>
    <div>
        <p></p>
        <div id="last"></div>
        <table>
            <tr>
                <td id="c1">奖5元</td>
                <td id="c2">谢谢惠顾</td>
                <td id="c3">奖100元</td>
            </tr>
            <tr>
                <td id="c8">再抽一次</td>
                <td id="star">开始抽奖</td>
                <td id="c4">奖50元</td>
            </tr>
            <tr>
                <td id="c7">奖20元</td>
                <td id="c6">奖500元</td>
                <td id="c5">奖200元</td>
            </tr>
        </table>
    </div>

    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        let s = 5;
        let time = setInterval(function () {
            $(&#39;p&#39;).html(`抽奖倒计时,还有<span>${s}</span>秒`);
            s--;
            if (s < 0) {
                clearInterval(time)
                $("#star").css({
                    background: "grey",
                    "font-size": "24px"
                })
            }
        }, 1000)
        $(&#39;#star&#39;).on(&#39;click&#39;, function () {
            let i = 0;
            let t = 0;
            let num = parseInt(Math.random() * 8 + 1)
            console.log(num)
            change = setInterval(function () {
                i++;
                if (i > 8) {
                    i = 1;
                    t++;
                }
                $(&#39;.cj&#39;).removeClass(&#39;back&#39;)
                $(&#39;#c&#39; + i).addClass(&#39;back&#39;)
                if (t == 4) {
                    if (i == num) {
                        clearInterval(change)
                        $(&#39;#last&#39;).html(`恭喜你中奖：${$(&#39;#c&#39; + i).text()}`)
                    }
                }
            }, 200)

        })

    </script>
</body>

</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So erstellen Sie Artikelabsätze, um die Hintergrundfarbe über das JQuery-Attribut toggleClass() zu ändern

Über die Implementierung des JavaScript-Karussell-Stay-Effekts

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery, um eine einfache Lotterie mit neun Quadraten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!