九宫格随机抽奖模板_做一个猜奖游戏,用<table>元素制作一个九宫格,并将奖品随机地放入其中一个格子.鼠-CSDN博客

本文链接：https://blog.csdn.net/weixin_68658847/article/details/127520656

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            width: 500px;
            height: 500px;
            display: flex;
            flex-wrap: wrap;
        }

        div {
            width: 33.3%;
            border: 2px solid black;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #play {
            font-size: 30px;
            font-weight: 900;
            color: red;
            background-color: pink;
        }
    </style>
</head>

<body>
    <main>
        <div>你猜我是什么奖品? </div>
        <div>你猜我是什么奖品? </div>
        <div>你猜我是什么奖品? </div>
        <div>你猜我是什么奖品? </div>
        <div id="play">开始抽奖</div>
        <div>你猜我是什么奖品? </div>
        <div>你猜我是什么奖品? </div>
        <div>你猜我是什么奖品? </div>
        <div>你猜我是什么奖品? </div>
    </main>

    <script>
        var order = [0, 1, 2, 5, 8, 7, 6, 3]; // 抽奖顺序
        var price = ["兰博基尼2000抵扣券", "谢谢惠顾", "腾讯视频会员", "IPhone14 pro max", "奖励回家", "休息两小时", "一颗含笑半步颠", "再来一次"];
        var div = document.querySelectorAll("div"); //所有格子
        var playGame = document.querySelector("#play"); //开始按钮
        var timer = null; //记录定时器。
        var currentSelectID = 0; //游戏进行中当前选中的下标。

        // 点击开始游戏
        playGame.addEventListener("click", function () {
            // 10~30之间的随机数。
            var randomNum = parseInt(Math.random() * 20 + 10);

            if (timer) return; //节流
            timer = setInterval(function () {
                //循环所有取消全部样式
                for (var i = 0; i < div.length; i++) {
                    if (i == 4) continue
                    div[i].style.backgroundColor = "";
                    div[i].innerText = "你猜我是什么奖品?";
                }
                randomNum--;

                if (currentSelectID > 7) {
                    currentSelectID = 0;
                };
                // 根据指定顺序获取div设置样式
                div[order[currentSelectID]].style.backgroundColor = 'red';

                if (!randomNum) {
                    var randomPrice = parseInt(Math.random() * 8);
                    div[order[currentSelectID]].innerText = price[randomPrice];

                    clearInterval(timer);
                    timer = null;
                }
                currentSelectID++;

            }, 100);
        })



    </script>
</body>

</html>

第二种

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        #fa {
            width: 600px;
            height: 600px;
            border: 1px solid red;

        }

        #fa>div,
        p {
            width: 33%;
            height: 33%;
            border: 1px solid red;
            float: left;
            line-height: 200px;
            text-align: center;
            font-size: 40px;
            font-weight: 800;

        }

        #start {
            cursor: pointer;
            background-color: pink;
        }
    </style>
</head>

<body>

    <main id="fa">
        <div class="option" in="0">1</div>
        <div class="option" in="1">2</div>
        <div class="option" in="2">3</div>
        <div class="option" in="7">8</div>
        <p id="start">开始抽奖</p>
        <div class="option" in="3">4</div>
        <div class="option" in="6">7</div>
        <div class="option" in="5">6</div>
        <div class="option" in="4">5</div>
    </main>

    <script>
        let div = document.querySelectorAll("div")
        let p = document.querySelector("p")
        let index = 0;
        let redome;
        
        let flag = true
        p.addEventListener("click", function () {
            if (flag == true) {
                flag = false
                console.log(1);
                //随机函数
                function sjs(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min
                }
                let temer = setInterval(function () {

                    redome = sjs(0, div.length - 1)
                    for (let i = 0; i < div.length; i++) {
                        div[i].style.backgroundColor = ""
                    }
                    div[redome].style.backgroundColor = "red"
                }, 50)


                setTimeout(function () {
                    clearInterval(temer)
                    setTimeout(function () {
                        let arr = ["1.奖励羽毛球拍", "2.奖励一耳光", "3.五毛钱", "4.马萨拉蒂代金券", "5.球鞋", "6.象棋", "7.迪斯尼公园", "8.豪华双人七日游"]
                        alert(arr[div[redome].innerText - 1])
                        for (let i = 0; i < div.length; i++) {
                            div[i].style.backgroundColor = ""
                        }
                        flag = true;
                    }, 500)
                }, 3000)
            }
        })
    </script>
</body>


</html>