jQuery教程之用jQuery编写简单九宫格抽奖-职坐标

jQuery教程之用jQuery编写简单九宫格抽奖

沉沙 2019-03-11 来源：阅读 1446 评论 0

摘要：本篇文章探讨了jQuery教程之用jQuery编写简单九宫格抽奖，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了jQuery教程之用jQuery编写简单九宫格抽奖，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

jQuery教程之用jQuery编写简单九宫格抽奖

1 <!DOCTYPE html>
2 <html>
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 id="c1">奖5元</td>
58                 <td id="c2">谢谢惠顾</td>
59                 <td id="c3">奖100元</td>
60             </tr>
61             <tr>
62                 <td id="c8">再抽一次</td>
63                 <td id="star">开始抽奖</td>
64                 <td id="c4">奖50元</td>
65             </tr>
66             <tr>
67                 <td id="c7">奖20元</td>
68                 <td id="c6">奖500元</td>
69                 <td 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>