console
var num;
var state = false;
$(function () {
$('button').click(function () {
if (!state) {
state = true;
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)
window.setTimeout(function () {
window.clearInterval(_interval)
state = false
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;
}