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 相关文章推荐
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
jquery实现聊天机器人
Feb 08 jQuery
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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JavaScript 异步调用
2017/10/25 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python爬虫增加访问量的方法
2019/08/22 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
后勤工作职责
2013/12/22 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
信息管理应届生求职信
2014/03/07 职场文书
技术经济专业求职信
2014/09/03 职场文书
八一建军节演讲稿
2014/09/10 职场文书
社区服务活动报告
2015/02/05 职场文书
管理失职检讨书范文
2015/05/05 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
安全生产培训心得体会
2016/01/18 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
python实现黄金分割法的示例代码
2021/04/28 Python