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,我们将及时处理。
微信扫码关注
更新实时通知