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 相关文章推荐
javascript:void(0)的问题使用探讨
Apr 10 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
Jquery ajax基础教程
Nov 20 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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自带的进位制之间的转换函数
2013/06/08 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PDO::_construct讲解
2019/01/27 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
python实现简单坦克大战
2020/03/27 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
英国工具中心:UK Tool Centre
2017/07/10 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
服装促销活动方案
2014/02/23 职场文书
幼儿评语大全
2014/04/30 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
电影焦裕禄观后感
2015/06/09 职场文书