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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
javascript Keycode对照表
Oct 24 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
微信小程序中的onLoad详解及简单实例
Apr 05 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
快速解决element的autofocus失效问题
Sep 08 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
浅谈React高阶组件
2018/03/28 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
公司财务自我评价分享
2013/12/17 职场文书
八年级美术教学反思
2014/02/02 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
市场营销专业自荐书
2014/06/10 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
Python自动化实战之接口请求的实现
2022/05/30 Python