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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 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
如何用php获取文件名后缀
2013/06/09 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
jQuery 动画基础教程
2008/12/25 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
python 类之间的参数传递方式
2019/12/20 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
python温度转换华氏温度实现代码
2020/12/06 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
求职简历自荐信范文
2013/10/21 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
新年联欢会主持词
2014/03/27 职场文书
机械机修工岗位职责
2014/08/03 职场文书
学习十八大的心得体会
2014/09/01 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
诉讼授权委托书
2014/10/15 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书