基于javascript实现九宫格大转盘效果


Posted in Javascript onMay 28, 2020

本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下

基于javascript实现九宫格大转盘效果

实现代码:

<!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>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
自动设置iframe大小的jQuery代码
Sep 11 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
javascript中Number对象的toString()方法分析
Dec 20 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
全屏js头像上传插件源码高清版
Mar 29 #Javascript
js闭包引起的事件注册问题介绍
Mar 29 #Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 #Javascript
js滚动条平滑移动示例代码
Mar 29 #Javascript
JavaScript头像上传插件源码分享
Mar 29 #Javascript
js解决movebox移动问题
Mar 29 #Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 #Javascript
You might like
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
python进程与线程小结实例分析
2018/11/11 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python按照多个条件排序的方法
2019/02/08 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
路政管理专业推荐信
2013/11/11 职场文书
国际政治个人自荐信范文
2013/11/26 职场文书
超市采购员岗位职责
2014/02/01 职场文书
会计学自我鉴定
2014/02/06 职场文书
初中家长评语大全
2014/12/26 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书