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 相关文章推荐
css配合jquery美化 select
Nov 29 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
php防止SQL注入详解及防范
2013/11/12 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
基于jQuery的自动完成插件
2011/02/03 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
javascript折半查找详解
2015/01/26 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
物业品质提升方案
2014/06/08 职场文书
建筑安全责任书范本
2014/07/24 职场文书
爱情保证书
2015/01/17 职场文书
计划生育责任书
2015/05/09 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
Android studio 简单计算器的编写
2022/05/20 Java/Android