首页 > 代码库 > 大转盘抽奖css3+js(简单书写)
大转盘抽奖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 RMB225 </div>26 </div>27 <div class="rotate_row">28 <div class="rotate_item">29 RMB10030 </div>31 <div class="rotate_item">32 谢谢参与33 </div>34 <div class="rotate_item">35 流量100M36 </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: pointer38 }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(简单书写)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。