抽奖转盘模板（抽奖转盘）
你们好，最近小活发现有诸多的小伙伴们对于抽奖转盘模板，抽奖转盘这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、这里提供三张抽奖图片，示例需要的图片，请大家下载一下，不然img引入图片时会发生错误。此项技术需要用到css html 和JavaScript技术。原理很简单，详细步骤请看如下：
2、<!--这是html源码 -->
3、<!DOCTYPE html>
4、<html lang="en">
5、<head>
6、<meta charset="UTF-8">
7、<meta name="viewport" content="width=device-width, initial-scale=1.0">
8、<meta http-equiv="X-UA-Compatible" content="ie=edge">
9、<title>抽奖</title>
10、<link rel="stylesheet" href="./css/demo.css">
11、</head>
12、<body>
13、<div class="stage">
14、<img id="turntable-bg" src="./img/lottery-turntable-bg.jpg" alt="">
15、<img id="turntable" src="./img/lottery-turntable.png" alt="">
16、<img id="pointer" src="./img/lottery-pointer.png" alt="">
17、</div>
18、<div class="infomation">
19、<h1>抽奖次数:<span id="countSpan"></span><button id="countAdd">增加次数</button></button></h1>
20、<div class="infomation-right">
21、<h4>抽奖记录</h4>
22、<div id="look" class="look"></div>
23、</div>
24、</div>
25、<script src="./js/demo.js"></script>
26、</body>
27、</html>
28、<!--这是css代码-->
29、h1,
30、h2,
31、h3,
32、h4,
33、h5,
34、h6,
35、p,
36、body {
37、padding: 0;
38、margin: 0
39、}
40、.stage {
41、width: 650px;
42、margin: 0 auto;
43、border: 1px solid black;
44、position: relative
45、}
46、.stage img:nth-child(2) {
47、position: absolute;
48、top: 58px;
49、left: 118px
50、}
51、.stage img:nth-child(3) {
52、position: absolute;
53、top: 147px;
54、left: 260px;
55、cursor: pointer
56、}
57、.infomation {
58、width: 650px;
59、margin: 0 auto
60、}
61、.infomation h1 {
62、padding: 20px;
63、display: inline-block;
64、line-height: 30px
65、}
66、.infomation h1 button {
67、padding: 1px;
68、margin-left: 1rem
69、}
70、.infomation .infomation-right {
71、width: 200px;
72、height: 100px;
73、float: right;
74、text-align: center
75、}
76、.infomation .infomation-right .look {
77、width: 200px;
78、height: 100px;
79、overflow: hidden;
80、margin-top: 10px;
81、border: 1px solid black
82、}
83、这里我们主要细说JavaScript代码,我先将源码放出来给大家，大家可以按照源码来复制，先看看效果如何
84、<!--Javascript代码-->
85、window.onload = function () {
86、var pointer = document.getElementById('pointer');
87、var turntable = document.getElementById('turntable');
88、var countAdd = document.getElementById('countAdd');
89、var countSpan = document.getElementById('countSpan');
90、var look = document.getElementById('look');
91、var countSum = 2;
92、//初始化状态
93、countReport = true; //禁止用户狂点按钮;
94、countSpan.innerHTML = countSum;
95、look.scrollTop = look.scrollHeight;
96、var ranLog = {
97、code: undefined,
98、text: undefined,
99、prize: undefined
100、};
101、function randFn() {
102、var ran = Math.floor(Math.random() * 100);
103、return ran;
104、}
105、function randIfFn(ran) {
106、if (ran < 2) {
107、ranLog.code = 1;
108、ranLog.text = "一等奖"
109、ranLog.prize = "免单4999元"
110、} else if (ran < 10) {
111、ranLog.code = 2;
112、ranLog.text = "二等奖"
113、ranLog.prize = "免单50元"
114、} else if (ran < 18) {
115、ranLog.code = 3;
116、ranLog.text = "三等奖"
117、ranLog.prize = "免单10元"
118、} else if (ran < 20) {
119、ranLog.code = 4;
120、ranLog.text = "四等奖"
121、ranLog.prize = "免单5元"
122、} else if (ran < 25) {
123、ranLog.code = 5;
124、ranLog.text = "五等奖"
125、ranLog.prize = "免分期服务费"
126、} else if (ran < 30) {
127、ranLog.code = 6;
128、ranLog.text = "六等奖"
129、ranLog.prize = "提高白条额度"
130、} else {
131、ranLog.code = 7;
132、ranLog.text = "没中奖"
133、ranLog.prize = "再抽一次，说不定能中奖"
134、}
135、}
136、function turnFn() {
137、if (countReport == true) {
138、countReport = false;
139、var x = 30 + (ranLog.code - 1) * (360 / 7) + 1080;
140、turntable.style.transition = 'all 3s';
141、turntable.style.transform = 'rotate(' + x + 'deg)';
142、console.log(x)
143、setTimeout(function () {
144、lookFn();
145、x = x - 1080;
146、turntable.style.transition = 'all 0s';
147、turntable.style.transform = 'rotate(' + x + 'deg)';
148、console.log(x);
149、countReport = true;
150、}, 3000)
151、}
152、}
153、function lookFn() {
154、var lookp = document.createElement('p');
155、if (ranLog.code == 7) {
156、lookp.innerHTML = '很遗憾噢:' + ranLog.text + '' + ranLog.prize;
157、look.appendChild(lookp);
158、look.scrollTop = look.scrollHeight;
159、} else {
160、lookp.innerHTML = '恭喜你获得了:' + ranLog.text + '' + ranLog.prize;
161、look.appendChild(lookp);
162、look.scrollTop = look.scrollHeight;
163、}
164、}
165、pointer.onclick = function () {
166、if (countSum > 0) {
167、if (countReport == true) {
168、randIfFn(randFn())
169、turnFn();
170、countSum--;
171、countSpan.innerHTML = countSum;
172、}
173、} else {
174、alert('你没有抽奖次数');
175、}
176、}
177、countAdd.onclick = function () {
178、if (countReport == true) {
179、countSum++;
180、var lookp = document.createElement('p');
181、lookp.innerHTML='你增加了一次抽奖机会';
182、look.appendChild(lookp);
183、countSpan.innerHTML = countSum;
184、look.scrollTop=look.scrollHeight;
185、} else {
186、alert('在转的过程中无法增加次数噢')
187、}
188、}
189、}
190、<!--下面步骤开始解析源码-->
191、var pointer = document.getElementById('pointer');
192、var turntable = document.getElementById('turntable');
193、var countAdd = document.getElementById('countAdd');
194、var countSpan = document.getElementById('countSpan');
195、var look = document.getElementById('look');
196、var countSum = 2; 给用户一个默认的抽奖次数为两次
197、countReport = true; //禁止用户狂点按钮;
198、countSpan.innerHTML = countSum;//将默认的抽奖次数显示到页面上
199、look.scrollTop = look.scrollHeight;//这里是让抽奖记录文本刷新的时候滚动条永远保持再底部
200、var ranLog = {
201、code: undefined,
202、text: undefined,
203、prize: undefined
204、};
205、//这里我们初始化抽奖编码code，抽奖值，奖项为未定义的值
206、function randFn() {
207、var ran = Math.floor(Math.random() * 100);
208、return ran;
209、}
210、//这里我们设置一个随机函数，是为了抽几等奖准备的
211、function randIfFn(ran) {
212、if (ran < 2) {
213、ranLog.code = 1;
214、ranLog.text = "一等奖"
215、ranLog.prize = "免单4999元"
216、} else if (ran < 10) {
217、ranLog.code = 2;
218、ranLog.text = "二等奖"
219、ranLog.prize = "免单50元"
220、} else if (ran < 18) {
221、ranLog.code = 3;
222、ranLog.text = "三等奖"
223、ranLog.prize = "免单10元"
224、} else if (ran < 20) {
225、ranLog.code = 4;
226、ranLog.text = "四等奖"
227、ranLog.prize = "免单5元"
228、} else if (ran < 25) {
229、ranLog.code = 5;
230、ranLog.text = "五等奖"
231、ranLog.prize = "免分期服务费"
232、} else if (ran < 30) {
233、ranLog.code = 6;
234、ranLog.text = "六等奖"
235、ranLog.prize = "提高白条额度"
236、} else {
237、ranLog.code = 7;
238、ranLog.text = "没中奖"
239、ranLog.prize = "再抽一次，说不定能中奖"
240、}
241、}
242、//这里我们传了参，把随机生成的数放在函数里面，然后用if判断来得到用户中了几等奖，然后用code，text，prize来把得到的值保存到变量当中
243、function turnFn() {
244、if (countReport == true) {
245、countReport = false;
246、var x = 30 + (ranLog.code - 1) * (360 / 7) + 1080;
247、turntable.style.transition = 'all 3s';
248、turntable.style.transform = 'rotate(' + x + 'deg)';
249、console.log(x)
250、setTimeout(function () {
251、lookFn();
252、x = x - 1080;
253、turntable.style.transition = 'all 0s';
254、turntable.style.transform = 'rotate(' + x + 'deg)';
255、console.log(x);
256、countReport = true;
257、}, 3000)
258、}
259、}
260、//由于是是大转盘的原因，我们是转动这个圆盘，给用户们一个假象，每次点击抽奖，转盘都会转三秒，然后再把得到的奖项利用alert方法来弹出窗口，提示用户中了几等奖
261、function lookFn() {
262、var lookp = document.createElement('p');
263、if (ranLog.code == 7) {
264、lookp.innerHTML = '很遗憾噢:' + ranLog.text + '' + ranLog.prize;
265、look.appendChild(lookp);
266、look.scrollTop = look.scrollHeight;
267、} else {
268、lookp.innerHTML = '恭喜你获得了:' + ranLog.text + '' + ranLog.prize;
269、look.appendChild(lookp);
270、look.scrollTop = look.scrollHeight;
271、}
272、}
273、//这个函数是把抽奖得到东西把记录保存再抽奖记录的div中，并显示出抽奖记录再页面上
274、pointer.onclick = function () {
275、if (countSum > 0) {
276、if (countReport == true) {
277、randIfFn(randFn())
278、turnFn();
279、countSum--;
280、countSpan.innerHTML = countSum;
281、}
282、} else {
283、alert('你没有抽奖次数');
284、}
285、}
286、//这个函数是当用户点击抽奖这按钮时，如果用户的countSum的值小于0的时候，则提示用户没有抽奖次数
287、countAdd.onclick = function () {
288、if (countReport == true) {
289、countSum++;
290、var lookp = document.createElement('p');
291、lookp.innerHTML='你增加了一次抽奖机会';
292、look.appendChild(lookp);
293、countSpan.innerHTML = countSum;
294、look.scrollTop=look.scrollHeight;
295、} else {
296、alert('在转的过程中无法增加次数噢')
297、}
298、}
299、//这个函数的意思是让玩家增加一次抽奖的机会，并把抽奖得到的东西显示到抽奖记录div页面上
300、我来给大家做给总结吧：页面由三个图片，一个是转盘图片，一个是转盘背景图片，还有一个是让用户点击抽奖的按钮图片，当用户点击抽奖按钮的时候，页面的转盘就会转动起来，注意：背景是不会转的，只是转盘会转，指针也不会转。这里我们设置了一个定时器三秒钟的过渡时间，让转盘先转三秒，给用户一个假象，三秒钟之后，我们的转盘就会慢慢停止下来，然后把转盘的度数算好，时间一到，抽奖得到的东西会以弹框的形式显示出来，再以抽奖记录的方式显示再页面上。
301、内容纯属手打，如果大家觉得小编打的好，希望给小白点个赞支持一下，关注下小编，我会一直更新网页前端的东西给大家，后续会更新轮播图，放大镜等JavaScript原生各种特效！
以上就是抽奖转盘这篇文章的一些介绍，希望对大家有所帮助。
免责声明：本文由用户上传，如有侵权请联系删除！
猜你喜欢
- 02-08
- 02-08
- 02-08
- 02-08
- 02-08
- 02-08
- 02-08
- 02-08
最新文章
- 02-08
- 02-08
- 02-08
- 02-08
- 02-08
- 02-08
- 02-08
- 02-08