您现在的位置是:首页 >  编程分享 > JQUERY丨JSJQUERY丨JS

用jQuery实现简单九宫格抽奖

昧光 转载 编程分享 2018-11-24

简介 jQuery实现简单九宫格抽奖 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下


这篇文章主要介绍了关于用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;
        }

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

        .cj.back {
            background: orange;
        }

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

</head>

<body>
    <p>
        <p></p>
        <p id="last"></p>
        <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>
    </p>

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

        })

    </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:


原地址:http://www.php.cn//js-tutorial-406018.html

Tags:


本篇评论 —— 揽流光,涤眉霜,清露烈酒一口话苍茫。


    声明:参照站内规则,不文明言论将会删除,谢谢合作。


      最新评论



ABOUT ME

Name:袅袅牧童 | Arkin

Job:Web全栈技术工程师

WeChat:nnmutong

Email:nnmutong@icloud.com

标签云