jQuery九宫格抽奖转盘实例效果

时间：6年前阅读：4991

1、大家在很多活动页面上都看到绚丽多彩的抽奖运用，网上也有比较多关于这方面写的效果代码。以下就是整个jQuery抽奖的代码，至于抽奖布局的话，大家就看着处理吧。这个代码有一些BUG，不过也很容易处理，大家看到有更好的实现方法，一起学习！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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 class="cj" id="c1">奖3元优惠券</td>
                <td class="cj" id="c2">谢谢惠顾</td>
                <td class="cj" id="c3">奖100元优惠券</td>
            </tr>
            <tr>
                <td class="cj" id="c8">再抽一次</td>
                <td id="star" style="background: darkcyan;">开始抽奖</td>
                <td class="cj" id="c4">奖50元优惠券</td>
            </tr>
            <tr>
                <td class="cj" id="c7">奖20元优惠券</td>
                <td class="cj" id="c6">奖8元优惠券</td>
                <td class="cj" id="c5">奖200元优惠券</td>
            </tr>
        </table>
    </div>

    <script src="../tu/jquery-1.11.3.min.js"></script>
    <script>
        let s = 5;
        let time = setInterval(function () {
            $('p').html(`抽奖倒计时,还有<span>${s}</span>秒`);
            s--;
            if (s < 0) {
                clearInterval(time)
                $("#star").css({
                    background: "grey",
                    "font-size": "24px"
                })
            }
        }, 1000)
        $('#star').on('click', 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++;
                }
                $('.cj').removeClass('back')
                $('#c' + i).addClass('back')
                if (t == 4) {
                    if (i == num) {
                        clearInterval(change)
                        $('#last').html(`恭喜你中奖：${$('#c' + i).text()}`)
                    }
                }
            }, 200)

        })

    </script>
</body>

</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jQuery九宫格抽奖转盘实例效果

网友评论