js js九宫格抽奖源码怎么实现顺时针旋转抽奖

来源：蜘蛛抓取(WebSpider) 时间：2017-10-13 05:35 标签： js九宫格抽奖源码
基于javascript实现九宫格大转盘效果
作者：透笔度
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了基于javascript实现九宫格大转盘效果的相关资料，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果，供大家参考，具体内容如下
实现代码：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&九宫格大转盘&/title&
&style type="text/css"&
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12 color:#333;}
ul{ list-style:}
#lottery{width:400height:400margin:20px auto 0; position:}
#lottery div{width:100height:100text-align:centerfont-size:24color:#333; float:}
#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: left:100 top:100 height:200 width:200background:#C33; font-size:30 text-align: cursor: line-height:200 color:#}
&!--九宫格大转盘--&
&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&
&script type="text/javascript" src="/libs/jquery/2.1.4/jquery.min.js"&&/script&
&script type="text/javascript"&
$(function(){
//九宫格大转盘
var count=3;//可用次数
var i=//初始位置，
var speed=80;//转动速度
var ok=//产生0-11的整数，标记中奖位置
var count=//总变化次数
var nowcount=//当前的变化位置
var n=5;//圈数
function dong(){//利用递归模拟setinterval的实现
if(nowcount&count){
setTimeout(function(){
alert("恭喜你，中了"+eval(ok)+"等奖");
nowcount+=1;
if(xq==n-1){
speed=300;
$(".lottery-unit").removeClass("select");
$(".lottery-unit-11").addClass("select");
$(".lottery-unit").removeClass("select");
$(".lottery-unit-"+i).addClass("select");
setTimeout(dong,speed);
$(".start").click(function(){
if(!paly){
if(count==0){
alert("已经没有机会，下次再来！");
ok=Math.floor((Math.random()*12));//产生0-11的整数，标记中奖位置
count=n*12+//总变化次数
nowcount=0;//当前的变化位置
i=0;//初始位置，
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具会员登录登录还没有账号？&&&&&&原生js九宫格活动抽奖js特效代码编辑整理：js代码网 &浏览：3277 次原生js九宫格活动抽奖js特效代码，js九宫格抽奖，纯js代码非常简单一看就会。温馨提示：在线演示经加密处理，下载文件可正常查看源代码！大家都在下载 这些是最新的网站已改版，请使用新地址访问：
9GongGCJ 九宫格抽奖转盘，主要js实现转动以及中奖等 Java Develop 243万源代码下载-
&文件名称: 9GongGCJ& & [
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 364 KB
&&上传时间:
&&下载次数: 0
&&提 供 者:
&详细说明：九宫格抽奖转盘，主要js实现转动以及中奖等-Jiugongge sweepstakes turntable, rotate the main js achieve and winning, etc.
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&9GongGCJ&&........\images&&........\......\1.png&&........\......\2.png&&........\......\3.png&&........\......\4.png&&........\......\5.png&&........\......\6.png&&........\......\7.png&&........\......\8.png&&........\......\bg.jpg&&........\index.html&&........\js&&........\..\jquery-1.8.3.min.js
&输入关键字，在本站243万海量源码库中尽情搜索：

我要回帖

更多关于 js九宫格抽奖源码 的文章

 

随机推荐