用jQuery实现9宫格抽奖

1.布局

<div class="box">
    <div class="small s1"></div>
    <div class="small s2"></div>
    <div class="small s3"></div>
    <div class="small s4"></div>
    <div class="small s5"></div>
    <div class="small s6"></div>
    <div class="small s7"></div>
    <div class="small s8"></div>
    <div class="s9 start">
        开始
    </div>
</div>

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 260px;
            height: 260px;
            margin: 0 auto;
        }

        .small {
            position: absolute;
            width: 80px;
            height: 80px;
            box-sizing: border-box;
            background-color: #10a0ff;
            text-align: center;
            line-height: 80px;
            color: yellow;
        }

        .s1 {
            left: 0;
            top: 0;
        }

        .s2 {
            left: 90px;
            top: 0;
        }

        .s3 {
            left: 180px;
            top: 0;
        }

        .s4 {
            left: 180px;
            top: 90px;
        }

        .s5 {
            left: 180px;
            top: 180px;
        }

        .s6 {
            left: 90px;
            top: 180px;
        }

        .s7 {
            left: 0px;
            top: 180px;
        }

        .s8 {
            left: 0px;
            top: 90px;
        }

        .s9 {
            left: 90px;
            top: 90px;
        }

        .start {
            color: #3667d6;
            text-align: center;
            line-height: 80px;
            position: absolute;
            width: 80px;
            height: 80px;
            box-sizing: border-box;
            background-color: orange;
        }

        .add {
            background-color: deeppink;
        }
    </style>

效果图如下

添加动画效果，并保证每次点击开始就会随机一个数字

<script src="js/jquery-1.9.1.js"></script>
<script>
    var arr = ["洗衣机", "电饭煲", "谢谢参与", "电视机", "冰箱", "空调", "谢谢参与", "笔记本"];
    var speed = 60;
    var num = -1;
    var count = 0
    var time = null;
    $(".small").each(function (index) {
        $(this).text(arr[index]);
    });
    $(".start").on("click", function () {
        var times = parseInt(Math.random() * 16 + 24) + parseInt(Math.random() * 8);
        $(this).off();
        $(".small").removeClass("add");
        time = setInterval(function () {
            num++;
            count++;
            if (num > 7) {
                num = 0;
                $(".small").eq(0).addClass("add");
                $(".small").eq(7).removeClass("add");
            }
            else {
                $(".small").eq(num).addClass("add");
                $(".small").eq(num - 1).removeClass("add");
            }
            if (count > times) {
                clearInterval(time);
                setTimeout(function () {
                    alert(arr[num]);
                }, 0);
            }
        }, speed);
    });
</script>

实现效果