用jQuery編寫簡單九宮格抽獎

YKmaster發表於2018-06-30
jQuery
  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>

 

相關文章