집 >웹 프론트엔드 >JS 튜토리얼 >jQuery를 사용하여 간단한 9제곱 격자 복권 구현

jQuery를 사용하여 간단한 9제곱 격자 복권 구현

不言원래의: 2018-07-05 17:31:242100검색

이 글은 주로 jQuery를 사용하여 간단한 9각형 그리드 복권을 구현하는 방법을 소개합니다. 이는 특정 참고 가치가 있습니다. 이제 도움이 필요한 친구들이 참고할 수 있습니다.

<!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>

위 내용은 이 내용의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목해 주세요!

jQuery를 사용하여 간단한 9제곱 격자 복권 구현

관련 기사