?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编写简单九宫格抽奖
原文地址：https://www.cnblogs.com/yangkaiming/p/9246714.html