大转盘抽奖css3+js(简单书写)
今天花了一段时间简单写了下抽奖大转盘，这里写的只是自己想到的简单的写了下（也希望收获其他想法），后续，再写的话会更新。
大体思路：页面加载完成后，通过监听开始按钮的点击事件。然后会根据产生的随机数，通过控制旋转针对象的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>
最后是测试结果：
