//style样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
section {
width: 300px;
height: 300px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin: 50px auto;
border: 10px solid goldenrod;
}
section>div {
width: 90px;
height: 90px;
text-align: center;
background-color: yellow;
line-height: 90px;
font-size: 12px;
}
.red {
background-color: red;
color: white;
}
//html
<section></section>
//jquery代码
<script src="./jquery/jquery-3.4.1.js"></script>
<script>
// 将将奖品内容写到数组中
var items = ['1元现金红包', '30元租车劵', '迪士尼门票', '2日免费用车', '开始抽奖', '电影票', '50元租车券', '定制LED电扇', '100元租车券'];
layout()
// 布局
function layout() {
// 记录拼接的html字符串
var html = '';
for (var i = 0; i < items.length; i++) {
// 拼接字符串
var div = `<div>${items[i]}</div>`
html += div
}
// 将html字符串添加到section中
$('section').html(html)
}
// 点击抽奖
// 记录点击次数
var count = 0
$('section>div:eq(4)').click(function () {
// 判断是否在抽奖 是 点击无效
if (timer) {
return
}
count += 1
// 抽奖超过三次不能在抽奖了
if (count > 3) {
alert('次数用光了')
return
}
start()
})
// 抽奖逻辑
// timer为null 表示没有抽奖
// timer有值 表示抽奖
var timer = null;
function start() {
// 记录function调用次数
var randomCount = 0;
// 将索引值放到数组里面 然后开始随机索引值
var num = [0, 1, 2, 5, 8, 7, 6, 3];
// 随机数
//让他从那个位置开始旋转
var random = Math.floor(Math.random() * num.length);
timer = setInterval(function () {
randomCount++
random++
if (random == 8) {
random = 0
}
//取出当前的div的索引值
var arr = num[random];
//给元素添加移除class类名
$('div').eq(arr).addClass('red');
$('div').eq(arr).siblings().removeClass('red')
//执行20次的时候结束
if (randomCount == 20) {
clearInterval(timer);
timer = null;
setTimeout(function () {
alert(items[arr])
}, 0)
}
}, 400)
}
</script>