昧光
这篇文章主要介绍了关于用jQuery实现简单九宫格抽奖 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 600px;
height: 600px;
border: 2px solid black;
margin: 0 auto;
border: 2px solid black;
}
table td {
border: 2px solid black;
width: 200px;
text-align: center;
}
p {
text-align: center;
height: 10px;
}
span {
color: red;
}
Idstar {
/* background: gray; */
font-size: 20px;
}
.cj.back {
background: orange;
}
p {
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<p>
<p></p>
<p id="last"></p>
<table>
<tr>
<td id="c1">奖5元</td>
<td id="c2">谢谢惠顾</td>
<td id="c3">奖100元</td>
</tr>
<tr>
<td id="c8">再抽一次</td>
<td id="star">开始抽奖</td>
<td id="c4">奖50元</td>
</tr>
<tr>
<td id="c7">奖20元</td>
<td id="c6">奖500元</td>
<td id="c5">奖200元</td>
</tr>
</table>
</p>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
let s = 5;
let time = setInterval(function () {
$('p').html(`抽奖倒计时,还有<span>${s}</span>秒`);
s--;
if (s < 0) {
clearInterval(time)
$("Idstar").css({
background: "grey",
"font-size": "24px"
})
}
}, 1000)
$('Idstar').on('click', function () {
let i = 0;
let t = 0;
let num = parseInt(Math.random() * 8 + 1)
console.log(num)
change = setInterval(function () {
i++;
if (i > 8) {
i = 1;
t++;
}
$('.cj').removeClass('back')
$('Idc' + i).addClass('back')
if (t == 4) {
if (i == num) {
clearInterval(change)
$('Idlast').html(`恭喜你中奖：${$('Idc' + i).text()}`)
}
}
}, 200)
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)