当前位置: 首页 / 代码分享 / 正文

九宫格转盘抽奖怎么做?完整的html源码分享

发布时间:2020-09-06 00:56:46 作者:小超越君

抽奖效果有很多种,常见的有转盘、九宫格、随机码等等,本站之前做过几个转盘抽奖的例子(百度、机锋、QQ音乐),今天来做一个九宫格的效果。

九宫格转盘抽奖怎么做?完整的html源码分享

九宫格转盘抽奖完整源码下载:https://uomg.lanzous.com/iLRKVddtuje

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>九宫格转盘抽奖演示_dowebok</title>
<style>
* { margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: collapse; text-align: center; }
.draw { width: 460px; height: 470px; margin: 0 auto; padding: 40px; background-image: url(images/bg.png);}
.draw .item { width: 150px; height: 150px; background-image: url(images/bg1.png); }
.draw .item.active { background-image: url(images/bg2.png); }
.draw .img { display: table-cell; width: 150px; height: 61px; vertical-align: middle; text-align: center; }
.draw .img img { vertical-align: top; }
.draw .gap { width: 5px; }
.draw .gap-2 { height: 5px; }
.draw .name { display: block; margin-top: 10px; font-size: 14px; }
.draw .draw-btn { display: block; height: 150px; line-height: 150px; border-radius: 20px; font-size: 25px; font-weight: 700; color: #f0ff00; background-color: #fe4135; text-decoration: none; }
.draw .draw-btn:hover { background-color: #fe8d85; }
</style>
</head>
<body>
<h1>九宫格转盘抽奖演示</h1>

<div class="draw" id="lottery">
 <table>
  <tr>
   <td class="item lottery-unit lottery-unit-0">
    <div class="img">
     <img src="images/img1.png" alt="">
    </div>
    <span class="name">虚拟主机 1元/年</span>
   </td>
   <td class="gap"></td>
   <td class="item lottery-unit lottery-unit-1">
    <div class="img">
     <img src="images/img2.png" alt="">
    </div>
    <span class="name">VPS 1元/30天</span>
   </td>
   <td class="gap"></td>
   <td class="item lottery-unit lottery-unit-2">
    <div class="img">
     <img src="images/img3.png" alt="">
    </div>
    <span class="name">.top域名 1元/年</span>
   </td>
  </tr>
  <tr>
   <td class="gap-2" colspan="5"></td>
  </tr>
  <tr>
   <td class="item lottery-unit lottery-unit-7">
    <div class="img">
     <img src="images/img4.png" alt="">
    </div>
    <span class="name">免费主机1年</span>
   </td>
   <td class="gap"></td>
   <td class=""><a class="draw-btn" href="javascript:">立即抽奖</a></td>
   <td class="gap"></td>
   <td class="item lottery-unit lottery-unit-3">
    <div class="img">
     <img src="images/img5.png" alt="">
    </div>
    <span class="name">.com域名 19元/年</span>
   </td>
  </tr>
  <tr>
   <td class="gap-2" colspan="5"></td>
  </tr>
  <tr>
   <td class="item lottery-unit lottery-unit-6">
    <div class="img">
     <img src="images/img7.png" alt="">
    </div>
    <span class="name">.com域名 19元/年</span>
   </td>
   <td class="gap"></td>
   <td class="item lottery-unit lottery-unit-5">
    <div class="img">
     <img src="images/img6.png" alt="">
    </div>
    <span class="name">CDN加速 10元/15天</span>
   </td>
   <td class="gap"></td>
   <td class="item lottery-unit lottery-unit-4">
    <div class="img">
     <img src="images/img8.png" alt="">
    </div>
    <span class="name">20元快云币</span>
   </td>
  </tr>
 </table>
</div>

<script src="js/jquery.min.js"></script>
<script>
var lottery = {
 index: -1,    //当前转动到哪个位置,起点位置
 count: 0,     //总共有多少个位置
 timer: 0,     //setTimeout的ID,用clearTimeout清除
 speed: 20,    //初始转动速度
 times: 0,     //转动次数
 cycle: 50,    //转动基本次数:即至少需要转动多少次再进入抽奖环节
 prize: -1,    //中奖位置
 init: function(id) {
  if ($('#' + id).find('.lottery-unit').length > 0) {
   $lottery = $('#' + id);
   $units = $lottery.find('.lottery-unit');
   this.obj = $lottery;
   this.count = $units.length;
   $lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active');
  };
 },
 roll: function() {
  var index = this.index;
  var count = this.count;
  var lottery = this.obj;
  $(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
  index += 1;
  if (index > count - 1) {
   index = 0;
  };
  $(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
  this.index = index;
  return false;
 },
 stop: function(index) {
  this.prize = index;
  return false;
 }
};

function roll() {
 lottery.times += 1;
 lottery.roll(); //转动过程调用的是lottery的roll方法,这里是第一次调用初始化
 
 if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
 clearTimeout(lottery.timer);
  lottery.prize = -1;
  lottery.times = 0;
  click = false;
 } else {
  if (lottery.times < lottery.cycle) {
  lottery.speed -= 10;
 } else if (lottery.times == lottery.cycle) {
  var index = Math.random() * (lottery.count) | 0; //静态演示,随机产生一个奖品序号,实际需请求接口产生
  lottery.prize = index;  
 } else {
  if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
   lottery.speed += 110;
   } else {
    lottery.speed += 20;
   }
  }
  if (lottery.speed < 40) {
  lottery.speed = 40;
 };
 lottery.timer = setTimeout(roll, lottery.speed); //循环调用
}
return false;
}

var click = false;

window.onload = function(){
lottery.init('lottery');

$('.draw-btn').click(function() {
 if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮,后面的点击不响应
  return false;
 } else {
  lottery.speed = 100;
  roll(); //转圈过程不响应click事件,会将click置为false
  click = true; //一次抽奖完成后,设置click为true,可继续抽奖
  return false;
 }
});
};
</script>


</body>
</html>

文章转载请保留本文链接:https://www.zhe94.com/767.html

小超越
热爱折腾,曾想着改变世界,如今只能向生活低头,寻找可口的牛奶和面包
添加站长微信作者头像
专注高品质湛江网站建设及湛江SEO优化服务 立即咨询