首页 > > 网页制作 > Javascript >

原生js轮盘抽奖实例分析（幸运大转盘抽奖）

2018-06-24 00:40:46来源：未知阅读 ()

效果图：

所需图片素材：

这张图是pointer.png的位置的。

turntable-bg.jpg这张是转盘背景图，在背景位置。

这张是turntable.png位置的。

需要这三张图片，如果要实现一下，直接另存这三图片引入进去即可。如果不会请修改成对应的图片名字，放到同一个文件下。

基本原理：

1，通过设置CSS样式的position属性，z-index属性等实现背景图，转盘图与指针图的层叠摆放；

2，通过设置元素style.transform = "rotate(0deg)"实现旋转效果。

完整代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="description" content="">
 6     <meta name="author" content="熊仔其人">
 7     <title>转盘抽奖效果</title>
 8     <!-- 这里是css部分 -->
 9     <style>
10         #bg {
11             width: 650px;
12             height: 600px;
13             margin: 0 auto;
14             background: url(turntable-bg.jpg) no-repeat;
15             position: relative;
16         }
17 
18         img[src^="pointer"] {
19             position: absolute;
20             z-index: 10;
21             top: 155px;
22             left: 247px;
23         }
24 
25         img[src^="turntable"] {
26             position: absolute;
27             z-index: 5;
28             top: 60px;
29             left: 116px;
30             transition: all 4s;
31         }
32     </style>
33 </head>
34 <body>
35     <!-- 这里是HTML结构部分 --> 
36     <div id="bg"><img src="pointer.png" alt="pointer"><img src="turntable.png" alt="turntable"></div>  
37     <!-- 这里是js部分 -->
38     <script>
39         var oPointer = document.getElementsByTagName("img")[0];
40         var oTurntable = document.getElementsByTagName("img")[1];
41         var cat = 51.4; //总共7个扇形区域，每个区域约51.4度
42         var num = 0; //转圈结束后停留的度数
43         var offOn = true; //是否正在抽奖
44         oPointer.onclick = function () {
45             if (offOn) {
46                 oTurntable.style.transform = "rotate(0deg)";
47                 offOn = !offOn;
48                 ratating();
49             }
50         }
51         //旋转
52         function ratating() {
53             var timer = null;
54             var rdm = 0; //随机度数
55             clearInterval(timer);
56             timer = setInterval(function () {
57                 if (Math.floor(rdm / 360) < 3) { rdm = Math.floor(Math.random() * 3600); }
58                 else {
59                     oTurntable.style.transform = "rotate(" + rdm + "deg)";
60                     clearInterval(timer);
61                     setTimeout(function () {
62                         offOn = !offOn;
63                         num = rdm % 360;
64                         if (num <= cat * 1) { alert("4999元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "4999元"); }
65                         else if (num <= cat * 2) { alert("50元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "50元"); }
66                         else if (num <= cat * 3) { alert("10元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "10元"); }
67                         else if (num <= cat * 4) { alert("5元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "5元"); }
68                         else if (num <= cat * 5) { alert("免息服务"); console.log("rdm=" + rdm + "，num=" + num + "，" + "免息服务"); }
69                         else if (num <= cat * 6) { alert("提交白金"); console.log("rdm=" + rdm + "，num=" + num + "，" + "提交白金"); }
70                         else if (num <= cat * 7) { alert("未中奖"); console.log("rdm=" + rdm + "，num=" + num + "，" + "未中奖"); }
71                     }, 4000);
72                 }
73             }, 30);
74         }
75     </script>
76 </body>
77 </html>

css和HTML代码不多，主要是为了实现过渡设置，还有为了实现层叠而使用position定位，让元素脱离文档流，js代码在于获取元素和事件的点击，点击指针会旋转，所以要给指针加个点击事件，然后是判断旋转是否停止，如果没有就点击也不能调用函数ratating()，这个函数执行转盘的旋转和判断指针停在什么位置，然后弹出相应的内容，而函数里实现旋转的过程，是获取转盘的元素，然后使用js控制css的属性-transform：rotate()，我们不是使用过这个属性在css里直接使它实现旋转的效果吗？就是和伪类选择器:hover及过渡属性一起使用去实现的，那么因为css实现不了数字的运算和鼠标点击，所以让js去实现且控制css属性，实现到点击旋转这个功能，然而定时器的使用暂时不说，思路就是使用js实现数字的运算和鼠标的点击及css属性的控制达到旋转的效果。
Math.random()是随机数的生成，Math.floor()向下取整。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有