SOURCE

console 命令行工具 X clear

                    
>
console
var num;//定义当前项目
var state = false;//定义状态
$(function () {
    $('button').click(function () {
        //判断当前是停止状态,开始进行抽奖
        if (!state) {
            //将抽奖状态置为true
            state = true;

            //生成一个1-8的随机数
            num = Math.ceil(Math.random() * 8)

            //生成随机数,并修改对应奖项背景色
            var _interval = window.setInterval(function () {
                //还原所有项目的背景色
                $('.m-item').css('background-color', 'white')
                //生成随机数
                num = Math.ceil(Math.random() * 8)
                //将对应奖项背景色设为黄色
                $('#item-' + num).css('background-color', 'yellow')
            }, 100)

            //设置抽奖时长为3秒,自动弹出结果
            window.setTimeout(function () {
                window.clearInterval(_interval)
                state = false
                //做100毫秒延时,防止弹出和ye'm
                window.setTimeout(function () {
                    let res = $('#item-' + num + ' span').text()
                    alert('恭喜您中将,奖品为:' + res)
                }, 100)

            }, 3000)
        }
    })
})
<div class="m-box">
    <div class="m-row">
        <div id="item-1" class="m-item"><span>小米10</span></div>
        <div id="item-2" class="m-item"><span>iPhone11</span></div>
        <div id="item-3" class="m-item"><span>10元优惠券</span></div>
    </div>
    <div class="m-row">
        <div id="item-4" class="m-item"><span>料理机</span></div>
        <div class="m-item">
            <button style="height:150px;width:150px;">开始抽奖</button>
        </div>
        <div id="item-5" class="m-item"><span>电动车</span></div>
    </div>
    <div class="m-row">
        <div id="item-6" class="m-item"><span>谢谢惠顾</span></div>
        <div id="item-7" class="m-item"><span>100京豆</span></div>
        <div id="item-8" class="m-item"><span>运费券</span></div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
.m-box{
    display: flex;
    flex-direction: column;
}
.m-item{
    width: 150px;
    height: 150px;
    border:1px solid gray;
    text-align: center
}
.m-item span{
    line-height: 150px
}
.m-row{
    display: flex;
}