首頁 >web前端 >js教程 >用jQuery實現簡單九宮格抽獎

用jQuery實現簡單九宮格抽獎

不言原創: 2018-07-05 17:31:242079瀏覽

這篇文章主要介紹了關於用jQuery實現簡單九宮格抽獎，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

<!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實現簡單九宮格抽獎

相關文章