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


Posted in Javascript onApril 16, 2020

大家都玩过抽奖游戏,或者梦想抽到大奖吧,但是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的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>

实现的效果图:

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

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

以上就是本文的全部内容,希望大家可以喜欢,可以动手实践一下。

Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
使用Vue 实现滑动验证码功能
Jun 27 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 #Javascript
jquery控制显示服务器生成的图片流
Aug 04 #Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 #Javascript
用js编写的简单的计算器代码程序
Aug 04 #Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 #Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 #Javascript
JavaScript运动减速效果实例分析
Aug 04 #Javascript
You might like
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php绘制一条弧线的方法
2015/01/24 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
Node调用Java的示例代码
2017/09/20 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
Java面试笔试题大全
2016/11/23 面试题
实习鉴定评语
2014/01/19 职场文书
高中历史教学反思
2014/02/08 职场文书
白酒代理协议书范本
2014/10/26 职场文书
2015年入党决心书
2015/02/05 职场文书
2015国庆节感想
2015/08/04 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
muduo TcpServer模块源码分析
2022/04/26 Redis