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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 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代码
2006/12/06 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php实现的简单检验登陆类
2015/06/18 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Django实现分页显示效果
2019/10/31 Python
python中PyQuery库用法分享
2021/01/15 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
房地产还款计划书
2014/01/10 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
承诺书模板
2014/08/30 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
处罚决定书范文
2015/06/24 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python