抽奖 开源 html5,抽奖转盘.html · smilestone/awardRotate - Gitee.com
#box{width: 340px;height: 340px;
position: absolute;
left:50%;top:50%;margin-left:-170px;margin-top:-170px;
background-image: url("bg-lottery.png");
}
#pointer{width: 186px;height: 186px;
margin-left:77px;margin-top:77px;
background-image: url("playbtn.png");
cursor: pointer;
}
#records{
position: absolute;
left: 100%;margin-left: -400px;
top:50%;margin-top: -340px;
display: block;line-height: 15px;
width: 400px;background: cornsilk;color: crimson;
height:auto;font-size: 12px;
border:dotted black 1px;}
$(function(){
var backDoor=true;
var overTime=[0,1];//随机网络超时处理 0 超时, 1正常抽奖
var rotateObj=[
{myangle:0,msg:'恭喜,获得理财金2000元',rangeL:70,rangeR:89},
{myangle:60,msg:'谢谢参与,再接再厉吧!',rangeL:'',rangeR:''},
{myangle:120,msg:'恭喜,获得理财金5200元!',rangeL:90,rangeR:99},
{myangle:180,msg:'恭喜,获得京东e卡!',rangeL:0,rangeR:39},
{myangle:240,msg:'谢谢参与,再接再厉吧!',rangeL:'',rangeR:''},
{myangle:300,msg:'恭喜,获得理财金1000元',rangeL:40,rangeR:69},
{myangle:1440,msg:'sorry,由于系统访问量过大,网络超时!'}
];
var overTimeAngle=[1,3,5,7,9,11];//产生随机的边界角度的倍数
var randOverNum;
var randNum;
//空格键 控制是否有中奖概率
$(document).keydown(function(event){
var kcode=event.keyCode;
if(kcode==32){
if(backDoor==true){
backDoor=false;//永远不会中奖
}
else{
backDoor=true;//正常概率抽奖
}
}
});
//开始抽奖
$("#pointer").click(function(){
randOverNum=overTime[Math.floor(Math.random(0,1)*overTime.length)];//生成是否进入网络超时情况
if(backDoor==true){//如果允许有中奖概率
console.log("不中奖后门关闭!");
if(randOverNum==0){//进入网络故障
randNum=6;
console.log("有网络问题code:"+randOverNum+"中奖随机数指定为:"+randNum);
var baseAngle= overTimeAngle[Math.floor(Math.random(0,5)*overTimeAngle.length)]*30;//产生随机的边界角度作为参数:基础角度 的值
myRotate("#pointer",rotateObj,5000,baseAngle,randNum);//网络超时情况必须填写baseAngle参数
}
else{//正常抽奖
len=rotateObj.length;
randNum = Math.floor(Math.random(0,len-1)*(len-1));
console.log("无网络问题code:"+randOverNum+"正常抽奖,随机数是:"+randNum);
randCtrl(randNum);//如果抽中某一项奖,则进行二次运作,不同奖项号码,将被制定不同的概率再次抽奖,在概率范围内的视为最终中奖!
}
}
else {
console.log("开启了不中奖后门!");
myRotate("#pointer",rotateObj,4000,1440,noAward());//noAward()是不中奖的号码中的一个
}
});
//转动函数 共5个参数分别是指针的id("#idname")或class(".className"),抽奖提示语,旋转时间,基础旋转角度,随机奖品序号0-6
function myRotate(pointer,rotateData,duration,baseAngle,randNum){
var ang=rotateData[randNum].myangle;//获取奖品的旋转位置
$(pointer).rotate({
angle:0,
duration: duration,
animateTo:ang+(baseAngle||1080),
callback:function(){
alert(rotateData[randNum].msg);
$("#records").html($("#records").html()+rotateData[randNum].msg+" "+getSysDate()+"
");
console.log($(this).getRotateAngle());
$(pointer).rotate({
angle:0
});
}
});
}
//大盘转动
function bigPanRotate(addAngle){
console.log("偏移角度:"+addAngle);
$("#box").rotate({
angle:0,
duration: 3000,
animateTo:-(1440+addAngle),
callback:function(){
$(this).rotate({
angle:0
});
}
});
}
//中奖概率控制
function randCtrl(randNum){
var awardNum=[0,2,3,5];
var rangL,rangR;//定义各中奖号码的范围(概率)
var randRange;
var checkIn = $.inArray(randNum,awardNum);//如果存在,则返回该值在数组中的index,不存在返回-1
if(checkIn>=0){//随机抽奖号码在中奖号码之中,进行后台二次抽奖运作
randRange=Math.floor(Math.random(0,99)*100);//产生新的随机中奖号码 0-99的整数
rangL=rotateObj[randNum].rangeL;//当前中奖号码的左范围
rangR=rotateObj[randNum].rangeR;//当前中奖号码的右范围
console.log("抽中中奖号码:"+randNum+",新中奖号码是:"+randRange+",中奖范围是:("+rangL+","+rangR+"),中奖率:"+(rangR-rangL+1)+"%");
if(randRange>=rangL&&randRange<=rangR){//如果新的随机数 randRange在这个范围内 则该号码中奖
console.log("新中奖号码:"+randRange+",在中奖控制范围内,恭喜中奖!");
myRotate("#pointer",rotateObj,3000,1080,randNum);
}
else {//否则,无论randnum是哪个中奖号码 如果新的randrange不在相应号码的范围内就不算中奖
console.log("新中奖号码:"+randRange+",不在中奖控制范围内,再接再厉!");
myRotate("#pointer",rotateObj,4000,1440,noAward());//最后一个参数是randNum=noAward()的返回值
}
}
else {//随机号码不在中奖号码之中,执行不中奖函数
console.log("没有抽中任意中奖号码,将执行任意不中奖处理"+randNum);
myRotate("#pointer",rotateObj,4000,1440,noAward());//最后一个参数是randNum=noAward()的返回值
}
}
//返回不中奖选项
function noAward(){
var noAwardArr=[1,4];//只允许抽中1,4项 无奖项
len=noAwardArr.length;
randNum = noAwardArr[Math.floor(Math.random(0,len-1)*len)];//只能取到1,4两个没有奖项的可能
console.log("执行了不中奖函数,不中奖的随机数是:"+randNum);
return randNum;//函数返回值 是 不中奖的号码
}
})
一键复制
编辑
Web IDE
原始数据
按行查看
历史
抽奖 开源 html5,抽奖转盘.html · smilestone/awardRotate - Gitee.com相关推荐
- 简单的转盘抽奖html,HTML5抽奖转盘-CSS3超简单版本
网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现 ...
- 手机抽奖页面代码html,html5大转盘抽奖支持手机转盘抽奖代码
特效描述:html5 大转盘抽奖 支持手机 转盘抽奖代码.html5转盘,html5抽奖,手机转盘,手机抽奖,手机转盘抽奖,可配置奖品抽奖. 代码结构 1. 引入CSS 2. 引入JS 3. HTML ...
- css3抽奖转盘html5,HTML5抽奖转盘-CSS3超简单版本
网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现 ...
- php答题抽奖源码,PHP转盘抽奖接口实例
本文实例讲述了PHP转盘抽奖接口的实现方法.分享给大家供大家参考.具体如下: 这里的转盘抽奖随机返回一个转盘角度,概率可自己定义 lottery_get.php接口文件如下: /*session_st ...
- php实现抽奖接口实例,PHP转盘抽奖接口实例_PHP教程
PHP转盘抽奖接口实例 这篇文章主要介绍了PHP转盘抽奖接口的实现方法,实例分析了随机抽奖接口的实现原理与对应数据库操作的技巧,需要的朋友可以参考下 本文实例讲述了PHP转盘抽奖接口的实现方法.分享给 ...
- 摇一摇抽奖 php,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖
摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下:if (win ...
- 苹果手机html5摇一摇游戏戏码,利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion...
利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖,html5devicemotion 摇一摇JS脚本逻辑: 接下来是移动端JS脚本逻辑的实现,摇一摇的实现需借助html5新增的 ...
- html5 制作书架展示 PHP,html5制作转盘的详解及实例
今天给大家带来的案列是html5转盘实例,可以直接拿来做抽奖程序,有需要的朋友可以拿去使用,下面是案列代码. html5制作转盘游戏 h1{ width: 100%; height: 3rem; li ...
- html5倒车游戏,html5制作转盘游戏
html5制作转盘游戏 h1{ width: 100%; height: 3rem; line-height: 3rem; font-size: 1.8rem; color:#c60; text-al ...
最新文章
- 开源 免费 java CMS - FreeCMS2.1 会员站内信
- c语言两个for语句并列执行_C语言两个for语句如何并列编写?
- C语言ffmpeg合并多个视频,ffmpeg合并多个视频
- js 验证各种格式类型的正则表达式
- Spark Run本地设计模式
- 牛客网-数据结构笔试题目(七)-k-amazing数字求解
- 怎样用css设置图片下的投影,css – 做这种投影的最佳方法是什么?
- (85)Vivado 多周期路径约束情况
- 计算机本地无法连接失败怎么办,本地连接连不上怎么办?本地连接连不上解决方法...
- 使DIV水平和垂直居中
- 杭州·云栖 2050 大会日程(5.25-5.27)
- 开启tomcat的gzip
- 乐鑫esp8266学习rtos3.0笔记第10篇:内置仅1M的Esp8285,如何攻破最棘手的OTA问题,大大节省资源成本开发产品;
- Java 将HTML转成PDF的方法
- 有监督机器学习训练流程---人工智能工作笔记0015
- 入门图形学:雪地特效(一)
- Imagination利用精简操作集计算(ROSC)技术实现灵活、高性能的神经网络推理
- Home键和返回键的区别
- ecu根据什么信号对点火提前角_刷ECU能让发动机秒变高功?工程师:你还太年轻...
- raid1重建时间_Intel主板RAID1恢复方法图解
热门文章
- (转)Unity3D研究院之手游开发中所有特殊的文件夹(assetbundle与Application.persistentDataPath)...
- Scott Hanselman's 推荐的的实用工具集合(2011版)
- TCP/IP协议(三次握手)
- Silverlight实例教程 - Out of Browser在线更新和Silent安装
- WCF for .NET CF的一个应用及两个困惑的问题
- 网管网络布线之常用兵器谱
- linux swap 内存交换分区调整
- Win7搭建Telnet服务器 解决Access Denied: Specified user is not is not a member of TelnetClients group
- php 数组 添加元素、删除元素
- FSD HOOK与SSDT HOOK恢复简单思路