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. bash、dash（/bin/bash和/bin/sh）的区别

    Linux中的shell有多种类型,其中最常用的几种是Bourne   shell(sh).C   shell(csh)和Korn   shell(ksh).三种shell各有优缺点. Bourne ...

  2. java性能优化读书笔记(1)

    1.采用clone()方式创建对象 java语言里面的所有类都默认继承自java.lang.Object,此类里有一个clone()方法: 拷贝对象返回的是一个新的对象,而不是一个对象的引用地址: 拷 ...

  3. centos 7 中防火墙的关闭问题

    新安装的centos 7 发现有些程序端口是关闭的,想到了防火墙和selinux  selinx 好关闭 /etc/sysconfig/selinux 中 追加 SELINUX=disabled 防火 ...

  4. C#知识点-枚举器和迭代器

    一.几个基本概念的理解 问题一:为什么数组可以使用foreach输出各元素 答:数组是可枚举类型,它实现了一个枚举器(enumerator)对象:枚举器知道各元素的次序并跟踪它们的位置,然后返回请求的 ...

  5. 待销售分拣单App数据推送

    管理待分拣商品的App的显示操作

  6. WordPress主题reBorn最新破解版发布

    今天上班的时候,没事浏览网页! 突然之间发现了这么一个标题,顿时让我产生了兴趣. 标题:WordPress主题reBorn最新破解版发布 不知道什么原因,现在原网址打不开了,可能是作者怕骚扰吧. 其实 ...

  7. bootstrap datatable 数据刷新问题

    在项目中,页面初始化的时候,通过通过向后台请求数据,页面初始化完之后,datatable是有数据的,当我点击页面的搜索按钮(按照时间过滤数据),datatable的数据要能重新刷新或者重载:这一点,我 ...

  8. （转）淘淘商城系列——使用Spring来管理Redis单机版和集群版

    http://blog.csdn.net/yerenyuan_pku/article/details/72863323 我们知道Jedis在处理Redis的单机版和集群版时是完全不同的,有可能在开发的 ...

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

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

  10. Docker 安装并定制 Nginx 服务器

    安装并定制 Nginx 1.查阅对应的官方文档,首先下载镜像文件: [spider@izwz9d74k4cznxtxjeeur9z local]$ sudo docker pull nginx [su ...