2021-03-11 jQuery实现九宫格抽奖

最新推荐文章于 2022-06-06 19:40:54 发布

nnnnnnn3

最新推荐文章于 2022-06-06 19:40:54 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/nnnnnnn3/article/details/114677779

版权

<!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,user-scalable=no, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    .outBox {
        width: 300px;
        height: 100px;
        display: flex;
        /*border: 1px solid red;*/
    }

    .chooseBlock {
        flex: 1;
        background-color: #00a0e8;
        box-sizing: border-box;
        border: 1px solid red;
    }

    .startBtn {
        line-height: 100px;
        background-color: #b2b315;
        text-align: center;
        cursor: pointer;
    }

    .shadow {
        background-color: #ff7f90;
    }

    .againBox {
        cursor: pointer;
        margin-left: 125px;
        width: 50px;
    }
</style>
<div class="outBox">
    <div class="block-0 rollBlock chooseBlock">1</div>
    <div class="block-1 rollBlock chooseBlock">2</div>
    <div class="block-2 rollBlock chooseBlock">3</div>
</div>
<div class="outBox">
    <div class="block-7 rollBlock chooseBlock">8</div>
    <div class="block  chooseBlock  startBtn" onselectstart="return false">start</div>
    <div class="block-3 rollBlock chooseBlock">4</div>
</div>
<div class="outBox">
    <div class="block-6 rollBlock chooseBlock">7</div>
    <div class="block-5 rollBlock chooseBlock">6</div>
    <div class="block-4 rollBlock chooseBlock">5</div>
</div>
<button class="againBox">reset</button>
<script src="./库/jquery-3.5.1.js"></script>
<script>
    $(function () {
        //转动动画
        var rollFn = function () {
            $(".rollBlock").each(function () {
                $(".rollBlock").removeClass("shadow")
            })
            $(".startBtn").off("click")//开始后解绑click事件
            var i = Math.floor(8 * Math.random());//在随机块开始转动
            let j = 0;
            var roll = function () {
                const block = document.getElementsByClassName("block" + "-" + i)
                const beforeBlock = document.getElementsByClassName("block" + "-" + (i - 1))

                if (i < 8) {
                    i = i + 1;
                    $(beforeBlock).removeClass("shadow")
                    $(block).addClass("shadow")
                    // $(".rollBlock").each(function () {
                    //     $(".rollBlock").removeClass("shadow")
                    // })
                } else if (i = 8) {
                    $(".block-0").addClass("shadow")
                    $(".block-7").removeClass("shadow")
                    i = 0
                } else {
                    i = 0;
                }
                j = j + 1; //记录转动多少格
                var ranNum = 80 + 8 * Math.random() //转动随机格数后停止
                if (j > ranNum) {
                    clearInterval(timer)//停止转动
                    // $(".rollBlock").each(function () {
                    //     $(".rollBlock").removeClass("shadow")
                    // })
                    // var num = 8 * Math.random();
                    // var randomNum = Math.floor(num)
                    // var chooseBlock = $(".rollBlock").toArray();
                    // var randomBlock = chooseBlock[randomNum];
                    // $(randomBlock).addClass("shadow")
                    $(".startBtn").on("click", rollFn)//结束后绑定click事件+功能函数
                }
            }
            var timer = setInterval(roll, 10)//转动速度
        }
        $(".startBtn").click(rollFn)
        
        $(".againBox").click(function () {
            $(".rollBlock").each(function () {
                $(".rollBlock").removeClass("shadow")
            })

        })

    })
</script>
</body>
</html>

nnnnnnn3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-03-11 jQuery实现九宫格抽奖

<!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,user-scalable=no, initial-scale=1.0">
复制链接

扫一扫