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 相关文章推荐
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
json的使用小结
Jun 08 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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 事件机制(2)
2011/03/23 PHP
php网页病毒清除类
2014/12/08 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
用javascript实现自定义标签
2007/05/08 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
用Python实现随机森林算法的示例
2017/08/24 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
大学新闻系自荐书
2014/05/31 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸