1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 table { 11 width: 600px; 12 height: 600px; 13 border: 2px solid black; 14 margin: 0 auto; 15 border: 2px solid black; 16 17 } 18 19 table td { 20 border: 2px solid black; 21 width: 200px; 22 text-align: center; 23 } 24 25 p { 26 text-align: center; 27 height: 10px; 28 } 29 30 span { 31 color: red; 32 } 33 34 #star { 35 /* background: gray; */ 36 font-size: 20px; 37 } 38 39 .cj.back { 40 background: orange; 41 } 42 43 div { 44 height: 20px; 45 text-align: center; 46 } 47 </style> 48 49 </head> 50 51 <body> 52 <div> 53 <p></p> 54 <div id="last"></div> 55 <table> 56 <tr> 57 <td class="cj" id="c1">奖5元</td> 58 <td class="cj" id="c2">谢谢惠顾</td> 59 <td class="cj" id="c3">奖100元</td> 60 </tr> 61 <tr> 62 <td class="cj" id="c8">再抽一次</td> 63 <td id="star">开始抽奖</td> 64 <td class="cj" id="c4">奖50元</td> 65 </tr> 66 <tr> 67 <td class="cj" id="c7">奖20元</td> 68 <td class="cj" id="c6">奖500元</td> 69 <td class="cj" id="c5">奖200元</td> 70 </tr> 71 </table> 72 </div> 73 74 <script src="./js/jquery-1.12.4.min.js"></script> 75 <script> 76 let s = 5; 77 let time = setInterval(function () { 78 $('p').html(`抽奖倒计时,还有<span>${s}</span>秒`); 79 s--; 80 if (s < 0) { 81 clearInterval(time) 82 $("#star").css({ 83 background: "grey", 84 "font-size": "24px" 85 }) 86 } 87 }, 1000) 88 $('#star').on('click', function () { 89 let i = 0; 90 let t = 0; 91 let num = parseInt(Math.random() * 8 + 1) 92 console.log(num) 93 change = setInterval(function () { 94 i++; 95 if (i > 8) { 96 i = 1; 97 t++; 98 } 99 $('.cj').removeClass('back') 100 $('#c' + i).addClass('back') 101 if (t == 4) { 102 if (i == num) { 103 clearInterval(change) 104 $('#last').html(`恭喜你中奖：${$('#c' + i).text()}`) 105 } 106 } 107 }, 200) 108 109 }) 110 111 </script> 112 </body> 113 114 </html> 文章来源: 用jQuery编写简单九宫格抽奖