简单易扩展可控性强的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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
Django框架表单操作实例分析
2019/11/04 Python
python 实现单通道转3通道
2019/12/03 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
生物制药自我鉴定
2014/01/25 职场文书
食品销售计划书
2014/04/26 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
药店促销活动策划方案
2014/08/24 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
在职证明书模板
2015/06/15 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
Python四款GUI图形界面库介绍
2022/06/05 Python