用jQuery实现简单九宫格抽奖
程序员文章站
2022-04-01 08:12:31
...
这篇文章主要介绍了关于用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;
}
#star {
/* background: gray; */
font-size: 20px;
}
.cj.back {
background: orange;
}
div {
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div>
<p></p>
<div id="last"></div>
<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>
</div>
<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)
$("#star").css({
background: "grey",
"font-size": "24px"
})
}
}, 1000)
$('#star').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')
$('#c' + i).addClass('back')
if (t == 4) {
if (i == num) {
clearInterval(change)
$('#last').html(`恭喜你中奖：${$('#c' + i).text()}`)
}
}
}, 200)
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
通过jquery toggleClass()属性制作文章段落更改背景颜色的方法
以上就是用jQuery实现简单九宫格抽奖的详细内容，更多请关注其它相关文章！