抽奖转盘网页版(抽奖转盘小程序)
你们好,最近小活发现有诸多的小伙伴们对于抽奖转盘哪里有卖,抽奖转盘这个问题都颇为感兴趣的,今天小活为大家梳理了下,一起往下看看吧。
1、 这里提供三张抽奖图片,示例需要的图片,请大家下载一下,不然img引入图片时会发生错误。此项技术需要用到css html和Java脚本语言技术。原理很简单,详细步骤请看如下:
2、 !-这是超文本标记语言源码-
3、 !文档类型超文本标记语言
4、 html lang='en '
5、 头
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、 标题抽奖/标题
10、 链接版本='样式表href='/css/demo.css '
11、 /头
12、 身体
13、 div class='stage '
14、 img id='turntable-bg' src='/img/彩票-转盘-BG。jpg ' alt=' '
15、 img id='转盘' src='/img/彩票-转盘。png ' alt=' '
16、 img id='指针src='/img/lottery-pointer.png' alt=' '
17、 /div
18、 div class='信息'
19、 氕抽奖次数:span id=' count span '/span button id=' count add '增加次数/button/button/h1
20、 div class='信息-右'
21、 h4抽奖记录/h4
22、 div id='look' class='look'/div
23、 /div
24、 /div
25、 脚本src='/js/demo.js'/script
26、 /body
27、 /html
28、 !-这是钢性铸铁代码-
29、 h1,
30、 h2,
31、 h3,
32、 h4,
33、 h5,
34、 h6,
35、 p,
36、 正文{
37、 填充:0;
38、 边距:0
39、 }。舞台{
40、 宽度:650像素
41、 边距:0自动;
42、 边框:1px纯黑;
43、 位置:相对
44、 }。阶段img:第n个子代(2) {
45、 位置:绝对;
46、 顶配:58px
47、 左:118像素
48、 }。阶段img:第n个子代(3) {
49、 位置:绝对;
50、 top:147 px;
51、 左:260像素
52、 光标:指针
53、 }。信息{
54、 宽度:650像素
55、 边距:0自动
56、 }。信息h1 {
57、 填充:20px
58、 显示:内嵌-块;
59、 行高:30px
60、 }。信息氕按钮{
61、 填充:1px
62、 左边距:1
63、 }。信息。信息-右侧{
64、 宽度:200像素
65、 高度:100像素
66、 浮动:对;
67、 文本对齐:居中
68、 }。信息。信息-好的。看{
69、 宽度:200像素
70、 高度:100像素
71、 溢出:隐藏;
72、 页边距-顶部:10px
73、 边框:1px纯黑
74、 }
75、 这里我们主要细说Java脚本语言代码,我先将源码放出来给大家,大家可以按照源码来复制,先看看效果如何
76、 !- Javascript代码-
77、 window.onload=function () {
78、 var指针=文档。getelementbyid(“指针”);
79、 var转盘=文档。getelementbyid(“转盘”);
80、 var count add=文档。getelementbyid(“count add”);
81、 var count span=文档。getelementbyid(“count span”);
82、 var look=文档。getelementbyid(' look ');
83、 var count sum=2;
84、 //初始化状态
85、 countReport=true//禁止用户狂点按钮;
86、 计数跨度。innerhtml=count sum
87、 看啊。滚动顶部=看。滚动高度;
88、 var ranLog={
89、 代码:未定义,
90、 文本:未定义,
91、 奖品:未定义
92、 };
93、 函数randFn() {
94、 var ran=数学。地板(数学。random()* 100);
95、 返回冉;
96、 }
97、 函数randIfFn(ran) {
98、 if (ran 2) {
99、 运行日志。代码=1;
100、 ranLog.text='一等奖'
101、 ranLog.prize='免单4999元'
102、 } else if (ran 10) {
103、 兰格。代码=2;
104、 ranLog.text='二等奖'
105、 ranLog.prize='免单50元'
106、 } else if (ran 18) {
107、 兰格。代码=3;
108、 ranLog.text='三等奖'
109、 ranLog.prize='免单10元'
110、 } else if (ran 20) {
111、 兰格。代码=4;
112、 ranLog.text='四等奖'
113、 ranLog.prize='免单5元'
114、 } else if (ran 25) {
115、 兰格。代码=5;
116、 ranLog.text='五等奖'
117、 ranLog.prize='免分期服务费'
118、 } else if (ran 30) {
119、 兰格。代码=6;
120、 ranLog.text='六等奖'
121、 ranLog.prize='提高白条额度'
122、 }否则{
123、 兰格。代码=7;
124、 ranLog.text='没中奖'
125、 ranLog.prize='再抽一次,说不定能中奖'
126、 }
127、 }
128、 函数turnFn() {
129、 if (countReport==true) {
130、 countReport=false
131、 var x=30(ranlog。代码-1)*(360/7)1080;
132、 转盘。风格。transition=“全是3”;
133、 转盘。风格。transform=' rotate(' x ' deg)'
134、 控制台。对数(x)
135、 setTimeout(function () {
136、 lookFn();
137、 x=x-1080;
138、 turntable.style.transition='全0 '
139、 转盘。风格。transform=' rotate(' x ' deg)'
140、 控制台。log(x);
141、 countReport=true
142、 }, 3000)
143、 }
144、 }
145、 函数lookFn() {
146、 var lookp=document。createelement(' p ');
147、 if (ranLog.code==7) {
148、 lookp.innerHTML='很遗憾噢:' ranlog。文本“”ranlog。奖品;
149、 看啊。appendchild(lookp);
150、 看啊。滚动顶部=看。滚动高度;
151、 }否则{
152、 lookp.innerHTML='恭喜你获得了:' ranlog。文本“”ranlog。奖品;
153、 看啊。appendchild(lookp);
154、 看啊。滚动顶部=看。滚动高度;
155、 }
156、 }
157、 pointer.onclick=function () {
158、 if (countSum 0) {
159、 if (countReport==true) {
160、 randIfFn(randFn())
161、 转fn();
162、 countSum-;
163、 计数跨度。innerhtml=count sum
164、 }
165、 }否则{
166、 警报('你没有抽奖次数');
167、 }
168、 }
169、 countAdd.onclick=function () {
170、 if (countReport==true) {
171、 countSum
172、 var lookp=document。createelement(' p ');
173、 lookp.innerHTML='你增加了一次抽奖机会;
174、 看啊。appendchild(lookp);
175、 计数跨度。innerhtml=count sum
176、 看啊。滚动顶部=看。滚动高度;
177、 }否则{
178、 警报('在转的过程中无法增加次数噢)
179、 }
180、 }
181、 }
182、 !-下面步骤开始解析源码-
183、 var指针=文档。getelementbyid(“指针”);
184、 var转盘=文档。getelementbyid(“转盘”);
185、 var count add=文档。getelementbyid(“count add”);
186、 var count span=文档。getelementbyid(“count span”);
187、 var look=文档。getelementbyid(' look ');
188、 var count sum=2;给用户一个默认的抽奖次数为两次
189、 countReport=true//禁止用户狂点按钮;
190、 计数跨度。innerhtml=count sum//将默认的抽奖次数显示到页面上
191、 看啊。滚动顶部=看。滚动高度;//这里是让抽奖记录文本刷新的时候滚动条永远保持再底部
192、 var ranLog={
193、 代码:未定义,
194、 文本:未定义,
195、 奖品:未定义
196、 };
197、 //这里我们初始化抽奖编码代码,抽奖值,奖项为未定义的值
198、 函数randFn() {
199、 var ran=数学。地板(数学。random()* 100);
200、 返回冉;
201、 }
202、 //这里我们设置一个随机函数,是为了抽几等奖准备的
203、 函数randIfFn(ran) {
204、 if (ran 2) {
205、 运行日志。代码=1;
206、 ranLog.text='一等奖'
207、 ranLog.prize='免单4999元'
208、 } else if (ran 10) {
209、 兰格。代码=2;
210、 ranLog.text='二等奖'
211、 ranLog.prize='免单50元'
212、 } else if (ran 18) {
213、 兰格。代码=3;
214、 ranLog.text='三等奖'
215、 ranLog.prize='免单10元'
216、 } else if (ran 20) {
217、 兰格。代码=4;
218、 ranLog.text='四等奖'
219、 ranLog.prize='免单5元'
220、 } else if (ran 25) {
221、 兰格。代码=5;
222、 ranLog.text='五等奖'
223、 ranLog.prize='免分期服务费'
224、 } else if (ran 30) {
225、 兰格。代码=6;
226、 ranLog.text='六等奖'
227、 ranLog.prize='提高白条额度'
228、 }否则{
229、 兰格。代码=7;
230、 ranLog.text='没中奖'
231、 ranLog.prize='再抽一次,说不定能中奖'
232、 }
233、 }
234、 //这里我们传了参,把随机生成的数放在函数里面,然后用如果判断来得到用户中了几等奖,然后用代码、文本、奖励来把得到的值保存到变量当中
235、 函数turnFn() {
236、 if (countReport==true) {
237、 countReport=false
238、 var x=30(ranlog。代码-1)*(360/7)1080;
239、 转盘。风格。transition=“全是3”;
240、 转盘。风格。transform=' rotate(' x ' deg)'
241、 控制台。对数(x)
242、 setTimeout(function () {
243、 lookFn();
244、 x=x-1080;
245、 turntable.style.transition='全0 '
246、 转盘。风格。transform=' rotate(' x ' deg)'
247、 控制台。log(x);
248、 countReport=true
249、 }, 3000)
250、 }
251、 }
252、 //由于是是大转盘的原因,我们是转动这个圆盘,给用户们一个假象,每次点击抽奖,转盘都会转三秒,然后再把得到的奖项利用警报方法来弹出窗口,提示用户中了几等奖
253、 函数lookFn() {
254、 var lookp=document。createelement(' p ');
255、 if (ranLog.code==7) {
256、 lookp.innerHTML='很遗憾噢:' ranlog。文本“”ranlog。奖品;
257、 看啊。appendchild(lookp);
258、 看啊。滚动顶部=看。滚动高度;
259、 }否则{
260、 lookp.innerHTML='恭喜你获得了:' ranlog。文本“”ranlog。奖品;
261、 看啊。appendchild(lookp);
262、 看啊。滚动顶部=看。滚动高度;
263、 }
264、 }
265、 //这个函数是把抽奖得到东西把记录保存再抽奖记录的差异中,并显示出抽奖记录再页面上
266、 pointer.onclick=function () {
267、 if (countSum 0) {
268、 if (countReport==true) {
269、 randIfFn(randFn())
270、 转fn();
271、 countSum-;
272、 计数跨度。innerhtml=count sum
273、 }
274、 }否则{
275、 警报('你没有抽奖次数');
276、 }
277、 }
278、 //这个函数是当用户点击抽奖这按钮时,如果用户的countSum的值小于0的时候,则提示用户没有抽奖次数
279、 countAdd.onclick=function () {
280、 if (countReport==true) {
281、 countSum
282、 var lookp=document。createelement(' p ');
283、 lookp.innerHTML='你增加了一次抽奖机会;
284、 看啊。appendchild(lookp);
285、 计数跨度。innerhtml=count sum
286、 看啊。滚动顶部=看。滚动高度;
287、 }否则{
288、 Alert('您不能在传输过程中增加次数')
289、 }
290、 }
291、 //这个功能意味着玩家可以增加一次抽奖的机会,并在抽奖记录的div页面显示从抽奖中获得的东西。
292、 我给大家总结一下:页面由三张图片组成,一张是转盘的图片,一张是转盘背景的图片,一张是用户点击抽奖的按钮的图片。当用户点击抽奖按钮时,页面的转盘就会转动。注意:背景不会转,转盘会转,指针不会转。这里我们设置一个过渡时间为三秒的定时器,让转盘旋转三秒,给用户一种错觉。三秒钟后,我们的转盘会慢慢停下来,然后计算转盘的度数。到时候抽奖获得的东西会以盒子的形式展示出来,然后以抽奖记录的形式展示在页面上。
293、 内容纯属手游。如果你认为边肖踢得很好,我希望给小白一个赞美和支持。注意边肖。我会一直为你更新网页前面的东西,然后更新旋转木马,放大镜等JavaScript原生特效!
以上就是抽奖转盘这篇文章的一些介绍,希望能帮助到大家。
扫描二维码推送至手机访问。
版权声明:文章内容摘自网络,如果无意之中侵犯了您的版权,请联系本站,本站将在3个工作日内删除。谢谢!