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. 238 Product of Array Except Self 除自身以外数组的乘积

    一个长度为 n 的整形数组nums,其中 n > 1,返回一个数组 output ,其中 output[i] 等于nums中除nums[i]以外所有元素的乘积.不用除法 且在O(n)内解决这个问 ...

  2. centos服务器/dev/xvda1空间占满的解决方法

    突然线上Centos的机器磁盘空间占满报警,第一反映是日志文件很大,占用了较多的磁盘空间.于是简单的上去看了一下.但是发现线上不是的地址对应的空间占的并不多.用:df -h 命令看了一下,/dev/x ...

  3. 简单的css缩放动画,仿腾讯新闻的分享按钮和美团app底部的图标样式

    最近看到一些好看的hover的图形缩放效果.然后自己就写了下,发现这2种效果都不错.如果伙伴们更好的实现方式可以在下面留言哦~ 还有美团的效果,我就不展示了,喜欢的可以去app应用上看看. 这两种效果 ...

  4. C++（Typedef声明）

    typedef 声明: 使用 typedef 为一个已有的类型取一个新的名字.下面是使用 typedef 定义一个新类型的语法: typedef type newname; 例如,下面的语句会告诉编译 ...

  5. STA之Concepts (2)

    3 Skew between signals Skew is the difference in timing between two or more signals, maybe data, clo ...

  6. CPU位数、操作系统位数、机器字长、C/C++基本数据类型长度

    1.CPU位数=CPU中寄存器的位数=CPU能够一次并行处理的数据宽度(位数)=数据总线宽度: //现在的计算机处理器一般都是64位,这是硬件的事. 2.CPU为了实现其功能设计了指令集,即是CPU的 ...

  7. 使用python获得N个区分度较高的RGB颜色值

    获得任意N个区分度最高的RGB颜色值是一个经典的问题,之前在做一些可视化的东西时需要解决这个问题.首先去网上找了一些方法,未果,于是想自己来搞,心里的想法是,先给出一个距离函数用来度量两个RGB颜色值 ...

  8. Linux命令运行监测和软件安装

    监测命令的运行时间 time command $ time sleep 5 real 0m5.003s # 程序开始至结束的时间,包括其它进程占用的时间片和IO时间 user 0m0.001s # 进 ...

  9. 反转链表_JAVA

    package algorithms; /* * * * 输入一个链表,反转链表后,输出新链表的表头. * public class ListNode { int val; ListNode next ...

  10. 【转载】eclipse设置护眼色详细教程

    先上一张效果图:     下面开始设置: 首先设置代码区的背景色: Window–>preference-->General-->Editors-->Test Editors ...