<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
通过jquery toggleclass()属性制作文章段落更改背景颜色的方法
关于javascript轮播停留效果的实现
以上就是用jquery实现简单九宫格抽奖的详细内容。