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;
}