Maison >interface Web >js tutoriel >Utilisez jQuery pour implémenter une simple loterie à grille de neuf carrés

Utilisez jQuery pour implémenter une simple loterie à grille de neuf carrés

不言original: 2018-07-05 17:31:242094parcourir

Cet article présente principalement l'utilisation de jQuery pour implémenter une simple loterie à neuf carrés. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment créer des paragraphes d'article pour changer la couleur d'arrière-plan via l'attribut jquery toggleClass()

À propos de la mise en œuvre de l'effet de séjour du carrousel JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript jquery

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：pile de mémoire en javascriptArticle suivant：pile de mémoire en javascript

Articles Liés

Voir plus