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>
