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. 一个Velocity Template Language学习的框架

    Velocity Template Language(VTL)使得数据展示和后台代码的开发分离开来,最初用在基于servlet的网站开发上,它的这一特性使得它在应付MVC Web开发模式时显得尤其合适 ...

  2. jQuery学习笔记(5)-事件与事件对象

    一.前言 主要讲解事件的绑定与触发 二.jQuery中添加事件 1.使用bind()方法绑定事件 <input id="btn" type="button" ...

  3. [算法天天练] - C语言实现双向链表(一)

    双向链表是比较常见的,主要是在链表的基础上添加prev指针,闲话少说直接上代码吧(这个也是网上一个大神的思路,真心不错,条理清楚,逻辑缜密) 主要也是为了学习,贴上我所调试成功的代码(Linux环境下 ...

  4. Spinner实现列表下拉功能

    public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener { ...

  5. 328.io流（字符串-练习-复制文本文件一）

    public static void main(String[] args) { // TODO Auto-generated method stub FileReader fr = null; Fi ...

  6. CAD得到所有实体方法（网页版）

    主要用到函数说明: IMxDrawSelectionSet::AllSelect 得到当前空间的所有实体.详细说明如下: 参数 说明 [in,defaultvalue(NULL)] IMxDrawRe ...

  7. 17Web应用乱码问题

    Web应用乱码问题 Web应用乱码问题 简介 每个国家(或区域)都规定了本国家(或地区)计算机信息交换用的字符编码集,如美国的扩展ASCII码, 中国的GB2312-80,日本的JIS 等,作为该国家 ...

  8. 03Servlet API

    Servlet API Servlet是实现javax.servlet.Servlet接口的对象.大多数Servlet通过从GenericServlet或HttpServlet类进行扩展来实现.Ser ...

  9. 最长上升子序列(动态规划递推,LIS)

    1759:最长上升子序列 题目: 总时间限制: 2000ms 内存限制: 65536kB 描述 一个数的序列bi,当b1 < b2 < ... < bS的时候,我们称这个序列是上升的 ...

  10. Ubuntu安装Foxit PDF阅读器

    最近使用Ubuntu自带的PDF阅读器,发现使用体验较差,打算安装FoxitReader(可能是我习惯了Foxit和Adobe) Foxit官网 对系统平台要求如下:(支持Linux) 继续摸索了一下 ...