JS实现转动随机数抽奖的特效代码



大家都玩过抽奖游戏，或者梦想抽到大奖吧。可是有没有想过抽奖游戏是怎么实现的呐？今天就给大家分享一款转动随机数抽奖的JS特效代码。

实现代码例如以下

<!Doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK">

<script src="http://code.jquery.com/jquery-1.7.1.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>

效果图预览： http://www.aichengxu.com/view/64369 



如今抽奖游戏应用的非常广泛。我们每一个人都会接触到，尤其是节假日的时候各大商场都会组织这样的类型的游戏活动吸引顾客。我上面分享的这段代码事实上还有非常多能够改进，丰富的地方。比方我们能够美化它的界面，功能更加丰富，还有我们能够考虑转动随机数抽奖的速度，决定在哪一格变慢等。


JS实现转动随机数抽奖的特效代码的更多相关文章

  1. 非常漂亮js动态球型云标签特效代码

    <%@ page contentType="text/html;charset=UTF-8" language="java" import="j ...

  2. js手机号批量滚动抽奖代码实现

    我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始 ...

  3. JS实现的随机乱撞的彩色圆球特效代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  5. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  6. 一款基础模型的JS打飞机游戏特效代码

    <!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码& ...

  7. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  8. Jquery实现手机上下滑屏滑动的特效代码

    要引入两个jquery插件 可以去网上下载 <script src="jquery-1.11.1.min.js"></script><script s ...

  9. HTML特效代码大全

    1)贴图:<img src="图片地址">2)加入连接:<a href="所要连接的相关地址">写上你想写的字</a>1)贴 ...

随机推荐

  1. SQL数据库，增加查询修改以及防sql写入攻击

    SQL添加信息 SQL查询信息 SQL修改信息 SQL语句写入攻击: 普通语句添加信息 sql写入语句攻击: 解决方法:分开传送语句与参数关键:@

  2. Echarts和Quartz简介

    一.Echarts ​ ECharts 是由百度前端团队开发的一款开源的基于 js 图形报表组件,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大 ...

  3. bootstrap3无间距栅格/grid no-gutter

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. FCC 基础JavaScript 练习3

    1.通过使用提供的变量参数:名词myNoun.形容词myAdjective.动词myVerb.副词myAdverb,来创建一个新的句子 result, function wordBlanks(myNo ...

  5. 关于 . H 宏定义技巧

    #ifndef   LABEL #define   LABEL //代码部分 #endif LABEL为一个唯一的标号,命名规则跟变量的命名规则一样.常根据它所在的头文件名来命名,例如,如果头文件的文 ...

  6. POJ_1018_(dp)

    Communication System Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 28273   Accepted:  ...

  7. vue中的input使用e.target.value赋值的问题

    很久不写博客了... vue中对表单的处理,相对原生js,增加了一个双向绑定的语法糖:v-model.官方文档里有一段: v-model 会忽略所有表单元素的 value.checked.select ...

  8. CAD实现文档坐标到视区坐标的转换（com接口Delphi语言）

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  9. 基于APE物理引擎的管线容积率计算方法

    容积率一般应用在房地产开发中,是指用地范围内地上总建筑面积与项目总用地面积的比值,这个参数是衡量建设用地使用强度的一项非常重要的指标.在其他行业,容积率的计算也非常重要,如产品利用率.管道使用率等等. ...

  10. Listview异步加载图片之优化篇

    在APP应用中,listview的异步加载图片方式能够带来很好的用户体验,同时也是考量程序性能的一个重要指标.关于listview的异步加载,网上其实很多示例了,中心思想都差不多,不过很多版本或是有b ...