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

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

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

知识点：transform, translation,js数组，Math等等

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

接下来是基本代码结构：

 <div class="rotate_con">
             <div class="rotate_row">
                 <div class="rotate_item">
                     RMB100
                 </div>
                 <div class="rotate_item">
                     流量100M
                 </div>
                 <div class="rotate_item">
                     谢谢参与
                 </div>
             </div>
             <div class="rotate_row">
                 <div class="rotate_item">
                     再接再厉
                 </div>
                 <div class="rotate_item item_start" id="start">
                     开始
                     <div class="rotate" id="rotate_zhen">

                     </div>
                 </div>
                 <div class="rotate_item">
                     RMB2
                 </div>
             </div>
             <div class="rotate_row">
                 <div class="rotate_item">
                     RMB100
                 </div>
                 <div class="rotate_item">
                     谢谢参与
                 </div>
                 <div class="rotate_item">
                     流量100M
                 </div>
             </div>
         </div>

接下来是样式：

 <style>
             * {
                 margin:;
                 padding:;
             }

             .rotate_con {
                 margin: 50px auto;
                 width: 320px;
                 height: 320px;
                 border: 1px solid #FFFFFF;
                 border-radius: 50%;
             }

             .rotate_row {
                 display: flex;
                 display: -webkit-flex;
                 height: 33.3333333%;
             }

             .rotate_item {
                 flex: 0 0 33.3333333%;
                 -webkit-flex: 0 0 33.3333333%;
                 line-height: 106.666666px;
                 text-align: center;
                 background: yellow;
                 padding: 1px;
                 border: 1px solid #fff;
                 box-sizing: border-box;
             }

             .item_start {
                 position: relative;
                 background-color: #FF5E5E;
                 color: #FFFFFF;
                 font-weight: bold;
                 cursor: pointer
             }

             .item_start:active {
                 background: #ED745B;
             }

             .rotate {
                 position: absolute;
                 width: 5px;
                 height: 106px;
                 top: -53px;
                 left: 53px;
                 background: #fff;
                 transform: rotateZ(0deg);
                 transform-origin: left bottom;
                 -webkit-transform-origin: left bottom;
                 transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
             }

             .item_active {
                 border-color: red;
             }
         </style>

最后js部分

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

最后是测试结果：