简单易扩展可控性强的Jquery转盘抽奖程序


Posted in jQuery onMarch 16, 2019

基于Jquery的Javascript转盘抽奖程序,可以自定义抽奖界面,奖品数量、图片等,可控制中奖的奖品,抽奖转盘转动的速度和圈数。

在实际使用中,应当把概率放到后台程序中运算,以保证安全性和产生中奖奖品的可控性

简单易扩展可控性强的Jquery转盘抽奖程序

Javascript代码:

<script type="text/javascript">
var index = 1,  //当前亮区位置
prevIndex = 14,  //前一位置
Speed = 300,  //初始速度
Time,   //计时器
arr_length = 14,  //奖池奖品数量
EndIndex = 1,  //决定在哪一格变慢
cycle = 0,   //计算圈数  
EndCycle = 3,  //转动多少圈后停下
flag = false,  //结束转动标志
random_num = 1,  //中奖的格子
quick = 0;   //多少格后开始加速
function StartGame(){
 $("#random_box li").removeClass("random_current");
 //产出随机中奖数1--14之间
 //在实际应用中,中奖数应通过Ajax从后台获得,以确保中奖概率的可控性
 random_num = Math.floor(Math.random() * 14 + 1);
 //从第一格开始转动
 index = 1;
 //圈数计数器置0
 cycle = 0;
 flag = false;
 //中奖格子前5格开始变慢
 if(random_num > 10) {
  EndIndex = random_num - 10; 
 } else {
  EndIndex = random_num + arr_length - 10;
 }
 Time = setInterval(Star,Speed);
}
function Star(num){
  //跑马灯变速
  if(flag == false){
 //走五格开始加速
 if(quick == 5){
  clearInterval(Time);
  Speed=50;
  Time=setInterval(Star,Speed);
 }
 //跑指定圈数后开始减速
 if(cycle == EndCycle + 1 && index - 1 == EndIndex){
  clearInterval(Time);
  Speed = 300;
  //触发结束
  flag = true;
  Time = setInterval(Star,Speed);
 }
 }
  if(index > arr_length){
    index = 1;
    cycle ++;
  }
  //结束转动并选中号码
  if(flag == true && index==parseInt(random_num)){ 
 quick = 0;
 clearInterval(Time);
  }
  //设置当前选中样式
  $("#random_"+index).addClass('random_current'); 
  if(index > 1)
    prevIndex = index - 1;
  else{
    prevIndex = arr_length;
  }
  //取消上次选择样式 
  $("#random_"+prevIndex).removeClass('random_current'); 
  index ++;
  quick ++;
}
</script>

HTML代码:

<div class="box">
 <div class="inbox">
 <ul id="random_box">
  <li id="random_1"><img src="images/img01.gif"></li>
  <li id="random_2"><img src="images/img02.gif"></li>
  <li id="random_3"><img src="images/ts.gif"></li>
  <li id="random_4"><img src="images/img03.gif"></li>
  <li id="random_5"><img src="images/img04.gif"></li>
  <li id="random_6"><img src="images/ts.gif"></li>
  <li id="random_7"><img src="images/img05.gif"></li>
  <li id="random_8"><img src="images/img06.gif"></li>
  <li id="random_9"><img src="images/img07.gif"></li>
  <li id="random_10"><img src="images/ts.gif"></li>
  <li id="random_11"><img src="images/img01.gif"></li>
  <li id="random_12"><img src="images/img02.gif"></li>
  <li id="random_13"><img src="images/ts.gif"></li>
  <li id="random_14"><img src="images/img04.gif"></li> 
 </ul>
 <b class="ok" onclick="StartGame()">我要抽奖</b>
 </div>
</div>

CSS代码:

/* 
 CSS Document
 Power by 3water.com
*/
body,p,ul,ol,li,img,div{margin:0;padding:0;border:0;}
ul,li{list-style:none;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;}
.box{ padding:9px 0 0 11px; width:759px; height:611px; background:#ccc; margin:20px auto; }
.inbox{ width:751px; height:596px;position:relative;}
#random_box li{ position:absolute; width:144px; overflow:hidden; height:144px; border:1px solid #c7c5ca; background:#fff;}
#random_box li img{ width:144px; display:block; height:144px;}
.ok{ display:block; width:442px; height:294px; background:#c00; color:#fff; font-size:48px; position:absolute; 
top:149px; left:148px; cursor:pointer; text-align:center; line-height:280px;}
#random_1{ left:0; top:0;}
#random_2{ left:148px;top:0;}
#random_3{ left:296px;top:0;}
#random_4{ left:444px;top:0;}
#random_5{ left:592px;top:0; }
#random_6{ left:592px;top:148px;}
#random_7{ left:592px; top:298px;}
#random_8{ left:592px; top:446px;}
#random_9{ left:444px; top:446px;}
#random_10{ left:296px; top:446px;}
#random_11{ left:148px; top:446px;}
#random_12{ left:0; top:446px;}
#random_13{ left:0; top:298px;}
#random_14{ left:0; top:148px;}
#random_box li.random_current{border:2px solid red;}

点击下载:简单易扩展可控性强的Jquery转盘抽奖程序

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

jQuery 相关文章推荐
jQuery日期范围选择器附源码下载
May 23 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
详解jQuery-each()方法
Mar 13 #jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 #jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 #jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
[jQuery] 事件和动画详解
Mar 05 #jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
You might like
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
php使用正则验证中文
2016/04/06 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
js确定对象类型方法
2012/03/30 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
python实现五子棋小游戏
2020/03/25 Python
Python线程指南分享
2019/11/19 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
联想C++笔试题
2012/06/13 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
入党积极分子评语
2014/05/04 职场文书
甜品店创业计划书
2014/09/21 职场文书
新闻稿怎么写
2015/07/18 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python