简单的转盘抽奖html,HTML5抽奖转盘-CSS3超简单版本
网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现。
效果演示
核心思路
采用CSS3的transition(过渡效果),给定需要旋转的元素设置transform的rotate属性的结束角度,同时添加transition-timing-function来控制旋转的速率包括起始速率和结束速率,代码如下(浏览器前缀可自行添加):
#pointer {
transition: transform 6.5s;
transition-timing-function: ease-in-out;
}
复制代码
这样,给定结束角度后,元素就会旋转,结束角度可以自由控制旋转的圈数,例如结束角度为angelEnd,即圈数m=angelEnd/360 并取整,前几圈转满360无需特殊处理,关键是最后一圈的角度决定了抽奖的结果,代码如下:
let base = 2160; //先转满360×6圈
let result = getRandom(-30,330); // 最后一圈角度,获取-30到330的随机数
let angelEnd = -(base+result)// 结束角度数,负数代表逆时针旋转
$("#pointer").css({"transform":"rotate("+angelEnd+"deg)"});// 设置CSS
复制代码
判断抽奖结果
通过监听旋转元素的transitionend获得动画结束的事件,在此回调中,可以判断抽奖结果,同时结合奖品数据及奖品的角度区间来计算,代码如下:
gifts = {
"1":{
angleStart : -30,
angleEnd : 30,
tips : "恭喜您获得理财金2000元~~"
},
"2":{
angleStart : 31,
angleEnd : 90,
tips : "恭喜您获得理财金1000元~~"
},
"3":{
angleStart : 91,
angleEnd : 150,
tips : "很遗憾没有能中奖,再试一次吧~"
},
"4":{
angleStart : 151,
angleEnd : 210,
tips : "恭喜您抽中京东E卡一张~"
},
"5":{
angleStart : 211,
angleEnd : 270,
tips : "恭喜您获得理财金5200元~~"
},
"6":{
angleStart : 271,
angleEnd : 330,
tips : "很遗憾没有能中奖,再试一次吧~"
}
$("#pointer").on('transitionend',function(){
for (var key in gifts) {
// 最后一圈的角度落在哪个奖品区间
if (options.gifts[key].angleStart <= result && result<=options.gifts[key].angleEnd) {
// 得到奖品的key值
alert(options.gifts[key].tips);
}
}
})
复制代码
设定指定奖品
每个抽奖程序都可能预留内部接口,转盘也不例外,通过设置最后一圈的角度数即可提前设置奖品结果,代码如下:
let _key = null; // 内定奖品id
if (_key) {
result = getRandom(gifts[_key].angleStart,gifts[_key].angleEnd)
}
复制代码
到此为止,一个简单的转盘抽奖程序就完成了,根据上面的思路,不仅可以旋转指针,也可以旋转圆盘,各位可以体验一下demo看下具体的效果。
项目完整代码Github,有用的给个Star!
简单的转盘抽奖html,HTML5抽奖转盘-CSS3超简单版本相关推荐
- css3抽奖转盘html5,HTML5抽奖转盘-CSS3超简单版本
网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现 ...
- html页面转盘如何实现,html5制作转盘的详解及实例
今天给大家带来的案列是html5转盘实例,可以直接拿来做抽奖程序,有需要的朋友可以拿去使用,下面是案列代码. html5制作转盘游戏 h1{ width: 100%; height: 3rem; li ...
- 抽奖 开源 html5,抽奖转盘.html · smilestone/awardRotate - Gitee.com
jQuery 抽奖转盘 #box{width: 340px;height: 340px; position: absolute; left:50%;top:50%;margin-left:-170px ...
- 批处理 操作mysql_超简单使用批处理(batch)操作数据库
超简单使用批处理(batch)操作数据库 批处理(batch)是什么 批处理的执行就好比快递员的工作: 未使用批处理的时候,快递员一次从分发点将一件快递发给客户: 使用批处理,则是快递员将所有要派送的 ...
- 图片怎么转jpg?教你两个超简单的图片转jpg格式的方法
图片怎么转jpg?我们平时在工作当中经常会使用到图片素材,这些图片素材各种格式都有,其中最常见的有jpg.png.webp等格式,但是这些图片素材在使用的时候却并不是都能直接用,因为大部分网络平台可以 ...
- 超简单制作多系统启动U盘教程
超简单制作多系统启动U盘教程 文章目录 超简单制作多系统启动U盘教程 前言 基本配置 配置PE系统 配置其他操作系统 前言 这两天心血来潮,本来想用Win to go做一个windows便携系统, ...
- 图片大小怎么改小?两个超简单的方法教给大家
在我们平时的工作当中,经常会需要上传图片素材,但是不知道大家有没有遇到过图片太大不允许上传的情况,这时我们应该怎么办呢?这种情况下我们应该压缩图片大小,让图片符合上传条件就可以了,有很多小伙伴可能不清 ...
- 手机抽奖页面代码html,html5大转盘抽奖支持手机转盘抽奖代码
特效描述:html5 大转盘抽奖 支持手机 转盘抽奖代码.html5转盘,html5抽奖,手机转盘,手机抽奖,手机转盘抽奖,可配置奖品抽奖. 代码结构 1. 引入CSS 2. 引入JS 3. HTML ...
- h5超简单大转盘抽奖效果(概率可控)
也不太会讲解,直接贴代码吧.内容很简单,应该都可以看懂 <!DOCTYPE html> <html lang="en"> <head><m ...
最新文章
- 基于多阈值注意U-Net(MTAU)的MRI多模态脑肿瘤分割模型
- 计算机科学速成课】[40集全/精校] - Crash Course Computer Science
- 提高vb -》excel数据的导入速度
- Android中Uri的使用
- 用matlab建立控制系统的数学模型,第二章控制系统的数学模型.ppt
- androidstudio带pom的上传到jcenter_输送机@网带输送机@304网带输送机@304不锈钢网带输送机@输送机网带厂家定制...
- ylbtech-LanguageSamples-Porperties(属性)
- C# File类的操作
- html aside元素
- linux resin mysql_【转】Linux下Resin+JSP+MySQL的安装和配置
- 抽象代数学习笔记三《群:对称性变换与对称性群》
- FusionCharts的使用方法
- C# 调用Webservice实例
- c/s模型和b/s模型
- oracle ebs ar 表,EBS AR 模块常用表
- 单模光电转换器怎么接_单纤光纤收发器a与b怎么放?如何使用光纤收发器的AB端?...
- Spring Cache,从入门到真香
- Chapter8:控制系统状态空间分析
- LinkedIn动态如何发布,效果更好?更好的发挥领英功效
- 程序猿敲击代码的指法推荐
热门文章
- 用outlook收发live mail
- 用Python助女神发朋友圈
- 2018_Csrnet: Dilated convolutional neural networks for understanding the highly congested scenes
- HTML常用标签之列表标签
- 安徽省计算机一级证书领取时间表,2020年安徽计算机软件水平考试合格证书领取通知...
- 高云半导体| Arora V系列GW5AT-LV138FPG676A荣获2022年度最佳处理器芯片奖
- python基础-Task3
- 植物叶片相对电导率的测定
- 打怪升级之小白的大数据之旅(六十一)<Hive旅程第二站:Hive安装>
- iphone5刷机教程