基于javascript实现九宫格大转盘效果
作者:透笔度 时间:2024-04-17 10:33:13
本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九宫格大转盘</title>
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
ul{ list-style:none;}
/*demo*/
#lottery{width:400px;height:400px;margin:20px auto 0; position:relative;}
#lottery div{width:100px;height:100px;text-align:centerfont-size:24px;color:#333; float:left;}
#lottery .cent{ background:#C33;}
#lottery .lottery-unit-0{ background:#CC6;}
#lottery .lottery-unit-1{ background:#F99;}
#lottery .lottery-unit-2{ background:#CC6;}
#lottery .lottery-unit-3{ background:#F99;}
#lottery .lottery-unit-4{ background:#CC6;}
#lottery .lottery-unit-5{ background:#F99;}
#lottery .lottery-unit-6{ background:#CC6;}
#lottery .lottery-unit-7{ background:#F99;}
#lottery .lottery-unit-8{ background:#CC6;}
#lottery .lottery-unit-9{ background:#F99;}
#lottery .lottery-unit-10{ background:#CC6;}
#lottery .lottery-unit-11{ background:#F99;}
#lottery div.select{background:#F0F;}
#lottery .start{ position:absolute; left:100px; top:100px; height:200px; width:200px;background:#C33; font-size:30px; text-align:center; cursor:pointer; line-height:200px; color:#fff;}
</style>
</style>
</head>
<body>
<!--九宫格大转盘-->
<div id="lottery">
<div class="lottery-unit lottery-unit-0">1</div>
<div class="lottery-unit lottery-unit-1">2</div>
<div class="lottery-unit lottery-unit-2">3</div>
<div class="lottery-unit lottery-unit-3">4</div>
<div class="lottery-unit lottery-unit-11">12</div>
<div class="cent"></div>
<div class="cent"></div>
<div class="lottery-unit lottery-unit-4">5</div>
<div class="lottery-unit lottery-unit-10">11</div>
<div class="cent"></div>
<div class="cent"></div>
<div class="lottery-unit lottery-unit-5">6</div>
<div class="lottery-unit lottery-unit-9">10</div>
<div class="lottery-unit lottery-unit-8">9</div>
<div class="lottery-unit lottery-unit-7">8</div>
<div class="lottery-unit lottery-unit-6">7</div>
<div class="start" id="start">抽奖</div>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//九宫格大转盘
var count=3;//可用次数
var i=null;//初始位置,
var speed=80;//转动速度
var ok=null;//产生0-11的整数,标记中奖位置
var count=null;//总变化次数
var nowcount=null;//当前的变化位置
var n=5;//圈数
var paly=false;
var xq=0;
function dong(){//利用递归模拟setinterval的实现
if(nowcount>count){
setTimeout(function(){
paly=false;
alert("恭喜你,中了"+eval(ok)+"等奖");
},500);
}else{
nowcount+=1;
if(i>10){
xq+=1;
if(xq==n-1){
speed=300;
};
$(".lottery-unit").removeClass("select");
$(".lottery-unit-11").addClass("select");
i=0;
}else{
$(".lottery-unit").removeClass("select");
$(".lottery-unit-"+i).addClass("select");
i+=1;
};
setTimeout(dong,speed);
};
};
$(".start").click(function(){
if(!paly){
if(count==0){
alert("已经没有机会,下次再来!");
}else{
ok=Math.floor((Math.random()*12));//产生0-11的整数,标记中奖位置
count=n*12+ok;//总变化次数
nowcount=0;//当前的变化位置
i=0;//初始位置,
paly=true;
count-=1;
dong();
};
}else{
};
});
});
</script>
</html>
标签:js,九宫格,大转盘
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python requests的SSL证书验证方式
2021-10-06 09:21:51
![](https://img.aspxhome.com/file/2023/8/118058_0s.png)
Python3中FuzzyWuzzy库实例用法
2022-01-30 18:49:49
在go语言中安装与使用protobuf的方法详解
2024-04-25 15:27:32
通过源码分析Golang cron的实现原理
2023-06-15 23:49:24
详解Python3 对象组合zip()和回退方式*zip
2021-03-01 11:14:09
![](https://img.aspxhome.com/file/2023/2/115432_0s.webp)
oracle如何使用java source调用外部程序
2023-07-12 02:52:42
JAVA正则表达式 Pattern和Matcher
2023-07-01 19:13:53
javascript在事件监听方面的兼容性小结
2024-04-29 13:45:19
python中使用Celery容联云异步发送验证码功能
2023-07-29 08:27:06
![](https://img.aspxhome.com/file/2023/2/135412_0s.jpg)
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2023-05-03 22:58:56
![](https://img.aspxhome.com/file/2023/6/111906_0s.png)
详解Mysql命令大全(推荐)
2024-01-20 08:00:35
javascript使用Blob对象实现的下载文件操作示例
2024-04-29 13:14:52
![](https://img.aspxhome.com/file/2023/4/132824_0s.png)
Go语言判断文件或文件夹是否存在的方法
2024-05-09 14:50:55
javascript设计模式 – 桥接模式原理与应用实例分析
2024-04-26 17:12:09
关于Python中的main方法教程
2021-12-30 08:31:37
解决python虚拟环境切换无效的问题
2023-02-01 14:37:50
![](https://img.aspxhome.com/file/2023/0/77860_0s.jpg)
Python图片验证码降噪和8邻域降噪
2023-09-16 10:05:49
![](https://img.aspxhome.com/file/2023/2/95562_0s.bmp)
bootstrap-table实现表头固定以及列固定的方法示例
2024-04-29 13:13:19
![](https://img.aspxhome.com/file/2023/0/132830_0s.png)
Google Chrome的hack写法以及CSS的支持程度
2008-09-04 12:28:00
CSS属性与JavaScript 编码方法对照表
2008-12-01 13:01:00