简单易扩展可控性强的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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 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
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
js实现密码强度检验
2017/01/15 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
python模拟Django框架实例
2016/05/17 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python中如何导入类示例详解
2019/04/17 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
逻辑链路控制协议
2016/10/01 面试题
集体婚礼策划方案
2014/02/22 职场文书
开学典礼主持词
2014/03/19 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
家长评语怎么写
2014/12/30 职场文书
2015年档案室工作总结
2015/05/23 职场文书
2016年教师节慰问信
2015/12/01 职场文书
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python