jQuery实现转动随机数抽奖效果的方法


Posted in Javascript onMay 21, 2015

本文实例讲述了jQuery实现转动随机数抽奖效果的方法。分享给大家供大家参考。具体实现方法如下:

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em 
{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto; background:url 
(../images/BG.jpg) repeat-y;}
table{border-collapse:collapse;border-spacing:0;}
.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:3px 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:1px solid red;}
</style>
</head>
<body>
<div class="box">
<div class="inbox">
<ul id="random_box">
<li id="random_1">1</li>
<li id="random_2">2</li>
<li id="random_3">3</li>
<li id="random_4">4</li>
<li id="random_5">5</li>
<li id="random_6">6</li>
<li id="random_7">7</li>
<li id="random_8">8</li>
<li id="random_9">9</li>
<li id="random_10">10</li>
<li id="random_11">11</li>
<li id="random_12">12</li>
<li id="random_13">13</li>
<li id="random_14">14</li> 
</ul>
<b class="ok" onClick="StartGame()">抽奖</b>
</div>
</div>
<script>
var index=1, //当前亮区位置
prevIndex=14, //前一位置
Speed=300, //初始速度
Time, //定义对象
arr_length = 14; //GetSide(5,5), //初始化数组
EndIndex=1, //决定在哪一格变慢
cycle=0, //转动圈数 
EndCycle=3, //计算圈数
flag=false, //结束转动标志
random_num=1, //中奖数
quick=0; //加速
function StartGame(){
$("#random_box li").removeClass("random_current"); //取消选中
//random_num = parseInt($("#txtnum").val());//
random_num = Math.floor(Math.random()*13+2);
//产出随机中奖数2--12之间
index=1; //再来一次,从1开始
cycle=0;
flag=false;
//EndIndex=Math.floor(Math.random()*12);
if(random_num>5) {
EndIndex = random_num - 5; //前5格开始变慢
} else {
EndIndex = random_num + 14 - 5; //前5格开始变慢
}
//EndCycle=Math.floor(Math.random()*3);
Time = setInterval(Star,Speed);
}
function Star(num){
//跑马灯变速
if(flag==false){
//走五格开始加速
if(quick==5){
clearInterval(Time);
Speed=50;
Time=setInterval(Star,Speed);
}
//跑N圈减速
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>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
解析Vue.js中的组件
Feb 02 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 #Javascript
jQuery聚合函数实例
May 21 #Javascript
js获取页面description的方法
May 21 #Javascript
js同源策略详解
May 21 #Javascript
js设置document.domain实现跨域的注意点分析
May 21 #Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 #Javascript
jQuery插件expander实现图片翻转特效
May 21 #Javascript
You might like
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php实现的简单日志写入函数
2015/03/31 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
公司企业表扬信
2014/01/11 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
新教师2015年度工作总结
2015/07/22 职场文书