html 抽奖机 代码,JS实现转动随机数抽奖特效代码
大家都玩过抽奖游戏,或者梦想抽到大奖吧,但是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码。
实现代码如下
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;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
抽奖
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++;
}
实现的效果图:
现在抽奖游戏应用的非常广泛,我们每个人都会接触到,尤其是节假日的时候各大商场都会组织这种类型的游戏活动吸引顾客,我上面分享的这段代码其实还有很多可以改进,丰富的地方,比如我们可以美化它的界面,功能更加丰富,还有我们可以考虑转动随机数抽奖的速度,决定在哪一格变慢等。
以上就是本文的全部内容,希望大家可以喜欢,可以动手实践一下。
html 抽奖机 代码,JS实现转动随机数抽奖特效代码相关推荐
- JS实现转动随机数抽奖的特效代码
JS实现转动随机数抽奖的特效代码 大家都玩过抽奖游戏,或者梦想抽到大奖吧.可是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码. 实现代码例如以下 <!Doct ...
- java 9宫格抽奖_前端js实现九宫格模式抽奖(多宫格抽奖)
介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. 四宫格抽奖 ...
- html显示日期时间代码,JS全中文显示日期时间代码
JS全中文显示日期时间代码_网页代码站(www.webdm.cn) function number(index1){ var numberstring="一二三四五六七八九十"; ...
- HTML完成如下网页效果代码,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例...
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击&qu ...
- html图片鼠标动态效果代码,CSS3鼠标hover图片动画特效代码
这是一款CSS3鼠标hover图片动画特效代码.该鼠标hover动画使用简单的CSS transition技术,配合元素的宽度变化,制作出炫酷的鼠标hover图片遮罩层动画效果. 使用方法 在页面中引 ...
- JS限制表单输入特效代码
ENTER键可以让光标移到下一个输入框 <input οnkeydοwn="if(event.keyCode==13)event.keyCode=9" > <br ...
- 计算器ajax实现代码,jQuery实现简单的计算器特效代码
一款jquery实现简单计算器代码.该jquery计算器使用 Bootstrap 4进行布局,并结合math.js数学库,实现简单的加减乘除和平方,开方等数学计算.在页面中引入bootstrap 4, ...
- 怎么用html做出星空页面,用HTML5+canvas代码绘制的星空月亮图案特效代码
脚本代码(For Alixixi.com)如下: 用HTML5绘制的一个星空特效图 canvas{ display: block;border:1px dotted skyblue; } body{ ...
- html特效代码是怎么实现的,html特效代码大全
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 23. 永远都会带着框架 if (window == top)top.location.href = "frames.htm"; // ...
- 我的世界服务器信号下面是红,适用于服务器的红石抽奖机我的世界抽奖机电路图...
循环电路开始运作了就带动计数器的工作. 然后计数器驱动显示器滚动,这个跟时钟电路是一样的.就是把不同信号强度的红石信号分割成单独的信号输出 最后就是随机发生装置,一个循环电路驱动发射器不停发射东西,然 ...
最新文章
- 入门 | CNN也能用于NLP任务,一文简述文本分类任务的7个模型
- [深度学习] Attention机制,一文搞懂从实例到原理
- java查询数组中元素的索引
- checkbox 多选 mysql 搜索_mySQL技术的方方面面,不管是应用还是面试,看这一文就够了...
- 不是shell具有的功能和特点的是_环境监控主机具有哪些功能特点
- eclipse打包成jar_SpringBoot系列(三)- 用 jar的方式运行springboot项目
- EXCEL自定义功能区Ribbon
- 十代主板改win7_微星b460主板装win7系统及bios设置教程(支持十代usb驱动)
- 遇见未知的自己 - 张德芬
- 【译】 Golang 中的垃圾回收(三):Go Pacing
- 一天外汇交易走势时间分布
- 实现HTML的简单压缩
- java pfx 和cer_pfx证书和CER证书
- directive 自定义指令
- 豆瓣读者董董:王博士的格子衬衫与怀里的蛇
- python两个csv表数据合并_python – 根据列中的数据合并两个CSV文件
- PS电商插件/图牛助理插件/多模板电商工具/Adobe Photoshop CC 2015-2022可直接使用的ps插件
- python的歌曲评论数据分析_用Python爬取陈奕迅歌曲10万条评论的新发现
- 教你判断一个APP页面是原生的还是H5页面
- javascript socket