基于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 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 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的dl函数用法实例
2014/11/06 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
python数据处理实战(必看篇)
2017/06/11 Python
numpy中的高维数组转置实例
2018/04/17 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
详解python配置虚拟环境
2019/04/08 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
python中添加模块导入路径的方法
2021/02/03 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
某公司的.net工程师面试题笔试题
2013/11/22 面试题
学生励志演讲稿
2014/01/06 职场文书
演讲稿开场白
2014/01/13 职场文书
小学捐书活动总结
2014/07/05 职场文书
老龄工作先进事迹
2014/08/15 职场文书
python执行js代码的方法
2021/05/13 Python
学会Python数据可视化必须尝试这7个库
2021/06/16 Python