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. Jayway JsonPath实例

    开源:https://github.com/json-path/JsonPath 引入库: <dependency> <groupId>com.jayway.jsonpath& ...

  2. Asp 循环输出 form 表单提交的数据

    亲测asp提交form表单数据,在接收页面循环输出数据 dim var for each var in request.form response.write var&"=" ...

  3. Sql2008事务日志已满处理

    处理方式: USE [master] GO ALTER DATABASE gzl SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE gzl SET ...

  4. .Net实战之反射外卖计费

    场景 叫外卖支付,可以有以下优惠: 1.  满30元减12 2.  是会员减配送费,比如5元 3.  优惠券 …. 问题? 如何在不改代码的情况下更灵活的去控制优惠的变化??? 有些代码与实际业务可能 ...

  5. 全3D模具设计自动化解決方案

  6. java树型结构的数据展现设计

    在做一个需求管理的页面时,需求的展现是不限层级树型结构,需求下还可以分拆任务,页面要展现的字段有20多个,而且需求采用通用表单设计,db采用大宽表存储,有一百多个字段.目前数据量不大,第一版采用普通的 ...

  7. grunt 全局使用

    grunt 不同地方使用时需要将插件下载的当前文件夹,这是因为查找模块时是当前路径,这会造成多个工程使用时会需要下载多次,而这些东西又不应该存在于工程之中,所以应该将所有模块全局安装,然后在工程下面只 ...

  8. MySql IFNULL 联表查询出来的null 如何赋值

    mysql中isnull,ifnull,nullif的用法如下: isnull(expr) 的用法:如expr 为null,那么isnull() 的返回值为 1,否则返回值为 0.mysql> ...

  9. Java运算符法则

    JAVA运算符法则 运算符是一种特殊的符号,用于表示数据的运算,赋值和比较等: 算术运算符 正号+,负号-,加+,减-,乘*,除/,余或取模%,自增++,自减--,字符串相加+ 正号负号运算符代表运算 ...

  10. find命令查找和替换

    find命令查找和替换 语法: find -name '要查找的文件名' | xargs perl -pi -e 's|被替换的字符串|替换后的字符串|g' #查找替换当前目录下包含字符串并进行替换 ...