用jQuery编写简单九宫格抽奖

Posted 2020-11-20 yangkaiming

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用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>

以上是关于用jQuery编写简单九宫格抽奖的主要内容，如果未能解决你的问题，请参考以下文章

php+lottery.js制作九宫格抽奖实例

Flutter 实现九宫格抽奖动画效果

React九宫格抽奖

九宫格抽奖