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 14 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Javascript中replace()小结
2015/09/30 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
python基础教程之面向对象的一些概念
2014/08/29 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python探索之ModelForm代码详解
2017/10/26 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
在Python中增加和插入元素的示例
2018/11/01 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python实现大文件分割与合并
2019/07/22 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
python温度转换华氏温度实现代码
2020/12/06 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
思想品德自我鉴定
2013/10/12 职场文书
中专毕业自我鉴定
2013/10/16 职场文书
外语专业毕业生个人的自荐信
2013/11/19 职场文书
阿德的梦教学反思
2014/02/06 职场文书
2015年行政部工作总结
2015/04/28 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js