欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现抽奖(方形)

程序员文章站 2023-04-03 11:51:22
展示: HTML: CSS: JavaScript: ......

展示:

JS实现抽奖(方形)JS实现抽奖(方形)

html:

1     <div id="table"></div>
2     <div id="btn">
3         <button onclick="start('p', 'active','newactive', 100)">顺序抽/停止</button>
4         <button onclick="startran('p', 'active','newactive', 100)">随机抽/停止</button>
5     </div>

css:

 1 table {
 2     text-align: center;
 3     border-collapse: collapse;
 4 }
 5 
 6 table * {
 7     width: 60px;
 8     height: 60px;
 9 }
10 
11 #btn {
12     box-sizing: border-box;
13     width: 190px;
14     display: flex;
15     justify-content: space-between;
16     align-items: center;
17 }
18 
19 #btn * {
20     flex-grow: 1;
21     background-color: red;
22     border: 1px solid #000;
23     color: #fff;
24     height: 30px;
25     font-size: 10px;
26 }
27 
28 .active {
29     background-color: #ccc;
30 }
31 
32 .newactive {
33     background-color: #00ffff;
34 }

javascript:

  1     // 定义一个奖池
  2     var jackpot = [
  3         ['奖品a1', '奖品a2', '奖品a3'],
  4         ['奖品b1', '奖品b2', '奖品b3'],
  5         ['奖品c1', '奖品c2', '奖品c3']
  6     ];
  7 
  8     /**
  9      * [table 创建表格]
 10      * @param  {[array]} arr        [奖品数组]
 11      * @param  {[string]} selector [选择器]
 12      * @return {[string]} table [返回一个html标签]
 13      */
 14     function table(arr, selector) {
 15 
 16         var table = '<table border="1">';
 17 
 18         for (var i = 0; i < arr.length; i++) {
 19 
 20             table += '<tr>';
 21 
 22             for (var j = 0; j < arr[i].length; j++) {
 23 
 24                 table += '<td class="' + selector + '">' + arr[i][j] + '</td>';
 25 
 26             }
 27 
 28             table += '</tr>';
 29 
 30         }
 31 
 32         table += '</table>';
 33 
 34         return table;
 35 
 36     }
 37 
 38     // 输出奖池
 39     document.getelementbyid('table').innerhtml = table(jackpot, 'p');
 40 
 41     var key = true; // start,startran控制器
 42     var num = 3; // 抽奖次数
 43     // 抽过的还能抽     可定义抽奖次数-->次数限制                       num需要定义
 44     //                 不定义抽奖次数-->次数无限                       num不需定义
 45     // 抽过的不能抽     可定义抽奖次数-->次数限制(次数不超过选择器长度)   num需要定义
 46     //                 不定义抽奖次数-->次数等于选择器长度              num需要定义
 47 
 48     /**
 49      * [start 开始抽奖]
 50      * @param  {[string]} selector    [选择器]
 51      * @param  {[string]} addselector [给选中的添加样式]
 52      * @param  {[string]} newaddselector [中奖奖品样式]
 53      * @param  {[number]} speed       [时间越小,速度越快]
 54      * @return {[type]}             [description]
 55      */
 56     function start(selector, addselector, newaddselector, speed) {
 57 
 58         if (key) {
 59 
 60             if (typeof(num) == 'undefined' || num != 0) {
 61 
 62                 var count = 0;
 63 
 64                 // 如果写成var timer会每次执行时重新定义一个timer,那么clearinterval(timer)只能清除后面定义的那个timer,前面定义的已经没有变量指向了  无法清除
 65                 timer = setinterval(function() {
 66 
 67                     if (count < $('.' + selector).length) {
 68 
 69                         $('.' + selector).eq(count).addclass(addselector);
 70 
 71                         $('.' + selector).eq(count).siblings().removeclass(addselector);
 72 
 73                         $('.' + selector).eq(count).parent().siblings().children().removeclass(addselector);
 74 
 75                         count++;
 76 
 77                     } else {
 78 
 79                         count = 0;
 80 
 81                     }
 82 
 83                 }, speed);
 84 
 85                 if(typeof(num) != 'undefined'){
 86 
 87                     num--;
 88 
 89                 }
 90 
 91             } else{
 92 
 93                 key = false;
 94 
 95                 console.log("抽奖结束");
 96 
 97             }
 98 
 99         } else {
100 
101             clearinterval(timer);
102 
103             // 决定抽中的奖品的样式和抽中的奖品能否继续抽
104             $('.' + addselector).addclass(newaddselector).removeclass(selector);
105 
106             // 奖品
107             console.log($('.' + addselector).html());
108 
109         }
110 
111         key = !key;
112 
113     }
114 
115     /**
116      * [start 开始抽奖]
117      * @param  {[string]} selector    [选择器]
118      * @param  {[string]} addselector [给选中的添加样式]
119      * @param  {[string]} newaddselector [中奖奖品样式]
120      * @param  {[number]} speed       [时间越小,速度越快]
121      * @return {[type]}             [description]
122      */
123     function startran(selector, addselector, newaddselector, speed) {
124 
125         if (key) {
126 
127             if (typeof(num) == 'undefined' || num != 0) {
128 
129                 // 如果写成var timer会每次执行时重新定义一个timer,那么clearinterval(timer)只能清除后面定义的那个timer,前面定义的已经没有变量指向了  无法清除
130                 timer = setinterval(function() {
131 
132                     var count = math.floor(math.random() * $('.' + selector).length);
133 
134                     $('.' + selector).eq(count).addclass(addselector);
135 
136                     $('.' + selector).eq(count).siblings().removeclass(addselector);
137 
138                     $('.' + selector).eq(count).parent().siblings().children().removeclass(addselector);
139 
140                 }, speed);
141 
142                 if(typeof(num) != 'undefined'){
143 
144                     num--;
145 
146                 }
147 
148             } else {
149 
150                 key = false;
151 
152                 console.log("抽奖结束");
153 
154             }
155 
156 
157         } else {
158 
159             clearinterval(timer);
160 
161             // 决定抽中的奖品的样式和抽中的奖品能否继续抽
162             $('.' + addselector).addclass(newaddselector).removeclass(selector);
163 
164             // 奖品
165             console.log($('.' + addselector).html());
166 
167         }
168 
169         key = !key;
170 
171     }