码迷,mamicode.com
首页 > Web开发 > 详细

大转盘抽奖css3+js(简单书写)

时间:2016-09-23 20:03:57      阅读:322      评论:0      收藏:0      [点我收藏+]

标签:

   今天花了一段时间简单写了下抽奖大转盘,这里写的只是自己想到的简单的写了下(也希望收获其他想法),后续,再写的话会更新。

   大体思路:页面加载完成后,通过监听开始按钮的点击事件。然后会根据产生的随机数,通过控制旋转针对象的transform属性,然后进行旋转,最后在结束后获取存储来数组中对应的抽奖内容最后弹出。

   知识点:transform, translation,js数组,Math等等

   先看下效果,没有素材,只是用css简单的布了下局。不要喷我比较简陋,嘿嘿。

   技术分享

接下来是基本代码结构:

 1 <div class="rotate_con">
 2             <div class="rotate_row">
 3                 <div class="rotate_item">
 4                     RMB100
 5                 </div>
 6                 <div class="rotate_item">
 7                     流量100M
 8                 </div>
 9                 <div class="rotate_item">
10                     谢谢参与
11                 </div>
12             </div>
13             <div class="rotate_row">
14                 <div class="rotate_item">
15                     再接再厉
16                 </div>
17                 <div class="rotate_item item_start" id="start">
18                     开始
19                     <div class="rotate" id="rotate_zhen">
20 
21                     </div>
22                 </div>
23                 <div class="rotate_item">
24                     RMB2
25                 </div>
26             </div>
27             <div class="rotate_row">
28                 <div class="rotate_item">
29                     RMB100
30                 </div>
31                 <div class="rotate_item">
32                     谢谢参与
33                 </div>
34                 <div class="rotate_item">
35                     流量100M
36                 </div>
37             </div>
38         </div>

接下来是样式:

 1 <style>
 2             * {
 3                 margin: 0;
 4                 padding: 0;
 5             }
 6             
 7             .rotate_con {
 8                 margin: 50px auto;
 9                 width: 320px;
10                 height: 320px;
11                 border: 1px solid #FFFFFF;
12                 border-radius: 50%;
13             }
14             
15             .rotate_row {
16                 display: flex;
17                 display: -webkit-flex;
18                 height: 33.3333333%;
19             }
20             
21             .rotate_item {
22                 flex: 0 0 33.3333333%;
23                 -webkit-flex: 0 0 33.3333333%;
24                 line-height: 106.666666px;
25                 text-align: center;
26                 background: yellow;
27                 padding: 1px;
28                 border: 1px solid #fff;
29                 box-sizing: border-box;
30             }
31             
32             .item_start {
33                 position: relative;
34                 background-color: #FF5E5E;
35                 color: #FFFFFF;
36                 font-weight: bold;
37                 cursor: pointer
38             }
39             
40             .item_start:active {
41                 background: #ED745B;
42             }
43             
44             .rotate {
45                 position: absolute;
46                 width: 5px;
47                 height: 106px;
48                 top: -53px;
49                 left: 53px;
50                 background: #fff;
51                 transform: rotateZ(0deg);
52                 transform-origin: left bottom;
53                 -webkit-transform-origin: left bottom;
54                 transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
55             }
56             
57             .item_active {
58                 border-color: red;
59             }
60         </style>

最后js部分

 1 <script>
 2             //获取对象
 3             var getid = function(id) {
 4                 return document.getElementById(id);
 5             };
 6             //按照旋转顺序的数组
 7             var context = ["流量100M", "谢谢参与", "RMB2", "流量100M", "谢谢参与", "RMB100", "再接再厉", "RMB100"];
 8             var deg = 45, //旋转的默认角度360/8
 9                 numdeg = 0, //记录上次旋转停止时候的角度
10                 num = 0, //记录旋转后数组的位置
11                 isRotated = false; //判断是否在进行中
12             window.onload = function() {
13                 var zhen = getid("rotate_zhen");
14                 getid("start").addEventListener(‘click‘, function() {
15                     if(isRotated) return; //如果正在旋转退出程序
16                     isRotated = true;
17                     var index = Math.floor(Math.random() * 8); //得到0-7随机数
18                     num = index + num; //得到本次位置
19                     numdeg += index * deg + Math.floor(Math.random() * 3 + 1) * 360;
20                     zhen.style.webkitTransform = zhen.style.transform = "rotateZ(" + numdeg + "deg)";
21                     setTimeout(function() {
22                         if(num >= 8) { //如果数组位置大于7就重新开始
23                             num = num % 8;
24                         }
25                         alert(context[num]);
26                         isRotated = false; //旋转改为false说明没有旋转
27                     }, 1700)
28                 }, false)
29             }
30         </script>

最后是测试结果:

技术分享

 

大转盘抽奖css3+js(简单书写)

标签:

原文地址:http://www.cnblogs.com/hsp-blog/p/5901075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!