jQuery九宫格抽奖转盘实例效果
1、大家在很多活动页面上都看到绚丽多彩的抽奖运用，网上也有比较多关于这方面写的效果代码。以下就是整个jQuery抽奖的代码，至于抽奖布局的话，大家就看着处理吧。这个代码有一些BUG，不过也很容易处理，大家看到有更好的实现方法，一起学习！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></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 class="cj" id="c1">奖3元优惠券</td>
<td class="cj" id="c2">谢谢惠顾</td>
<td class="cj" id="c3">奖100元优惠券</td>
</tr>
<tr>
<td class="cj" id="c8">再抽一次</td>
<td id="star" style="background: darkcyan;">开始抽奖</td>
<td class="cj" id="c4">奖50元优惠券</td>
</tr>
<tr>
<td class="cj" id="c7">奖20元优惠券</td>
<td class="cj" id="c6">奖8元优惠券</td>
<td class="cj" id="c5">奖200元优惠券</td>
</tr>
</table>
</div>
<script src="../tu/jquery-1.11.3.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>
原文链接：https://www.qiquanji.com/post/7164.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
评论