Js实现轮盘抽奖功能,一招帮你解决选择困难症
不知道今天自己该吃什么,一招帮你解决选择困难症。
通过html+css+js实现一个轮盘抽奖功能。我们可以将平时吃的饭菜输入到代码中,每到纠结的时候只需点开抽一次就可以了。
实现步骤
html代码:
整体实现的结构是一个大的圆形,分成了左右两个部分。从上面的图片中我们可以看出,我们是将整个圆形分成了八块的,实现方法就是css的旋转。
<div class="outher"><div class="wapper"><div class="left"><div class="one"> <span class="text"></span></div><div class="two"> <span class="text"></span></div><div class="three"> <span class="text"></span></div><div class="four"> <span class="text"></span></div></div><div class="right"><div class="one"> <span class="text"></span></div><div class="two"> <span class="text"></span></div><div class="three"> <span class="text"></span></div><div class="four"> <span class="text"></span></div></div></div><div class="circle">抽奖</div>
</div>
css代码:
给body设置为flex布局,设置了水平和垂直居中,让整个轮播处于屏幕的中间。
*{margin:0;padding:0;}body{display: flex;justify-content: center;align-items: center;height: 100vh;}
.outher
是整个div块的样式设置,设置为一个圆形.
.wapper
是将整个圆形分为八个部分,transform:rotate(22.5deg)
定义 2D 旋转,选择了22.5deg正好使得箭头正对着每一部分的中间位置。
.outher{width:300px;height: 300px;position: relative;border-radius: 50%;}.wapper{width:300px;height: 300px;border-radius: 50%;overflow: hidden;transform:rotate(22.5deg);}
整个圆的宽度为300px,分成两部分每一部分都是150px。
.left{position: absolute;width: 150px;height: 300px;left:0;overflow: hidden;}.right{position: absolute;width: 150px;height: 300px;right:0;overflow: hidden;text-align: center;}
这里设置的transform-origin: right center
左半部分以右侧的中心点为转轴旋转,右半部分以左侧的中心点为旋转轴旋转。第一个div块不需要旋转,两部分因分别分成了4块,所以第二个旋转的度数就是45deg,第三个就是90deg。而且给每一部分设置交叉的颜色,区分开每一块。
.left div{position: absolute;top:0;left:0;width: 100%;height: 100%;transform-origin: right center;}.left div.one{background-color: #FC7C7B;} .left div.two{background-color: #F59462;transform:rotate(-45deg);}.left div.three{background-color: #FC7C7B;transform:rotate(-90deg);}.left div.four{background-color: #F59462;transform:rotate(-135deg);} .right div{position: absolute;top:0;left:0;width: 100%;height: 100%;transform-origin: left center;} .right div.one{background-color: #F59462;}.right div.two{background-color: #FC7C7B;transform:rotate(45deg);}.right div.three{background-color: #F59462;transform:rotate(90deg);}.right div.four{ background-color: #FC7C7B;transform:rotate(135deg);}
每一小部分中文字的样式设置,分别旋转22.5deg处于每一部分的中间位置。
.left .text{position: absolute;top:30px;left:55%;transform:rotate(-22.5deg);text-align: center;}.right .text{position: absolute;top:25px;left:11%;transform:rotate(22.5deg);text-align: center;}
这一部分就是中间抽奖和箭头的样式设置了。箭头就是一个三角形,位置正好处于小圆型的正中心。
.circle{width: 100px;height: 100px;background-color: white;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius: 50%;text-align: center;line-height: 100px;font-size: 30px;font-weight: bold;cursor: pointer;user-select: none;}.circle:after{width: 0;height: 0;border:40px solid white;border-left-width: 10px;border-right-width: 10px;position: absolute;content:"";border-left-color: transparent;border-top-color: transparent;border-right-color: transparent;top:-70px;left:calc(50% - 10px);z-index: -1;}
js代码:
在抽奖的过程中,不允许再次点击就设置了一个isFlag
,只有当isFlag=true
点击的时候才会触发后面的事件。生成一个随机数random
,然后再执行switch函数,然后执行相应的run函数,run函数传递两个参数angle
角度,text[random]
随机的一种菜。
let wapper = document.querySelector(".wapper");let textAll = document.querySelectorAll(".wapper .text");let text = ["黄焖鸡","麻辣烫","蛋炒饭","烧烤","火锅","热干面","牛排","螺蛳粉"];for(let i = 0 ; i < textAll.length ; i++){textAll[i].innerHTML = text[i]; }let isFlag = true;document.querySelector(".circle").onclick=function(){ if(isFlag){let random = parseInt(Math.random()*8)switch(random){case 0:run(22.5,text[random]);break;case 1:run(66.5,text[random]);break;case 2:run(112.5,text[random]); break;case 3:run(157.5,text[random]);break;case 4:run(338.5,text[random]);break;case 5:run(294.5,text[random]);break; case 6:run(247.5,text[random]);break;case 7:run(201.5,text[random]);break; }} };
下面的就是run函数的定义,为了让整个轮盘多转几圈,我们先设置了一个基础角度basic=1800
,可能一开始的旋转效果比较生硬,这里我们添加一个缓动动画效果,缓动动画公式 (结束位置 - 起始位置)* 缓动系数(0~1)。
function run(angle,text){isFlag = false;let begin = 0; let timer = null;let basic = 1800;timer = setInterval(function(){if(begin > (basic+angle)){isFlag = true;clearInterval(timer);}wapper.style.transform="rotate("+(begin)+"deg)";begin+=Math.ceil(basic+angle-begin)*0.1;},70);}
Js实现轮盘抽奖功能,一招帮你解决选择困难症相关推荐
- 一个基于HTML的可定制轮盘——帮你告别选择困难症
基于HTML的旋转转盘-小于30kb的可定制轮盘
- js实现九宫格抽奖功能
分享一下js的九宫格抽奖功能 首先是html部分: <div class="box"><div class="div2">短裙</ ...
- 创维电视卡在android,两招帮你解决创维电视运行卡顿问题
原标题:两招帮你解决创维电视运行卡顿问题 创维智能电视使用时间长了,运行时间长了就会出现卡顿的问题,其它电视也是这样的,很多用户都在吐槽,是不是电视质量不好,其实不是的,影响创维电视卡顿的原因有很多种 ...
- 如何让电脑永远没有弹窗广告,一招帮你解决!
如何让电脑永远没有弹窗广告,一招帮你解决! 1.首先在你的电脑里面打开控制面板: 2.点击<网络和 Intenet> 3.在弹出的对话框选择<隐私> 4.勾选<启动弹出窗 ...
- 选择困难症患者的福音!PaddleHub帮你任意搭配你想要的颜色!
目录 选择困难症患者的福音!PaddleHub帮你任意搭配你想要的颜色! 一.前言(项目链接在最后) 二.实现效果 三.ace2p模型介绍 四.引入相关库 五.安装新版本Hub 六.配置参数 七.分割 ...
- 买手机选择困难症,Python数据分析帮你解决
每年各大品牌旗舰机发布都是一大热点,特别是前几天发布的iPhone Xs Max算是手机界的大新闻了,新款iPhone的价格也再度刷新了手机定价的记录.看完发布会,相信很多人的心情是这样的(文末爬虫资 ...
- 如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
- 原生js实现轮盘抽奖,控制中奖概率(完整示例)
文章目录 1.实现旋转 2.控制得奖概率 3. 控制旋转动画落点 4.测试概率 完整代码 本想找一个现成的,结果发现网上只有能实现转了,但是效果并不是让人很满意,于是我就借鉴一个样式,重新改了js实现 ...
- 原生js 实现九宫格抽奖功能
1.先绘制一个九宫格轮盘 <div class="bodydom"><div class="block">鸿蒙紫气*1</div& ...
最新文章
- 将前500页,和中间500页的CVE编号放在一起
- 用JScript.net写.net应用程序
- python数据分析图表展示_1行代码实现Python数据分析:图表美观清晰,自带对比功能丨开源...
- 计算机网络怎么查看连接打印机驱动,如何检测网络打印机是否已成功连接到计算机[检测方法]...
- python函数分为哪几类_Python 69个内置函数分8类总结
- oracleI基础入门(8)--table--union
- 打造个人电脑安全终极防线
- Ioc--控制反转详解
- user_agent
- 智慧社区智能化管理系统搭建
- C/C++编程笔记:C++中的atol(),atoll()和atof()函数
- 教职工使用计算机管理制度,关于教师办公室电脑使用与管理的规章制度
- IllegalStateException: Only fullscreen opaque activities can request orientation
- 环境变量配置文件的作用-L63
- 文档化Python代码完全指南(翻译)
- 通信电子:RLC电路及滤波器
- IP包流量分析(一)(python+pypcap+dkpt)
- 4.STM32F407ZG按键输入
- 软件测试的测试用例怎么写?(含思维导图)
- HEX文件校验和算法