前端九宫格抽奖,九宫格抽奖活动
本文操作环境：windows7系统、jquery3.2.1版、戴尔自交第三代电脑
jquery怎么实现九宫格抽奖？
jquery——九宫格大转盘抽奖实例
一、用到的图片
二、代码如下，重点是js部分
！声明文档类型
超文本标记语言
头
meta http-equiv= Content-Type Content= text/html；charset=utf-8 /
titlejQuery九宫格大转盘抽奖/标题
风格
#彩票{宽度：570像素身高：510像素边距：0px自动；边框：4px纯色# ba1809}
#彩票台{背景色：黄色；}
#彩票台td {位置：相对；宽度：190像素高度：170像素文本对齐：居中；颜色：# 333;字体索引：-999}
#彩票台TD img {显示：块；宽度：190像素高度：170px}
#彩票台TD a {宽度：190 px高度：170像素显示：块；文字-装饰：无；背景：url(images/lottery1.jpg)无重复顶部居中；}
#彩票表TD a:hover { background-image:URL(图片/抽奖2。jpg)；}
#彩票台td.active .屏蔽{显示：块；}。面具{
宽度：100%;
身高：100%;
位置：绝对；
左：0;
top:0；
背景：url(images/mask.png)无重复；
显示：无；
}
/风格
/头
body=keBody
！-效果超文本标记语言开始-
div id=彩票
表格边框=0 单元格填充=0 单元格间距=0
tr
TD class=彩票-单位彩票-单位-0 img src=图片/礼物0。jpg div class= mask /div/TD
TD class=彩票-单位彩票-单位-1 img src=图片/礼品1。jpg div class= mask /div/TD
TD class=彩票-单位彩票-单位-2 img src=图片/礼品2。jpg div class= mask /div/TD
/tr
tr
TD class=彩票-单位彩票-单位-7 img src=图片/礼物7。jpg div class= mask /div/TD
tda href=#/a/td
TD class=彩票-单位彩票-单位-3 img src=图片/礼物3。jpg div class= mask /div/TD
/tr
tr
TD class=彩票-单位彩票-单位-6 img src=图片/礼物6。jpg div class= mask /div/TD
TD class=彩票-单位彩票-单位-5 img src=图片/礼品5。jpg div class= mask /div/TD
TD class=彩票-单位彩票-单位-4 img src=图片/礼品4。jpg div class= mask /div/TD
/tr
/表格
/div
编写src= http://代码脚本。jquery。com/jquery-最新。js /脚本
脚本类型=文本/javascript
定义变量彩票={
索引：-1,//当前转动到哪个位置，起点位置
计数：0,//总共有多少个位置
计时器：0，//setTimeout的ID，用方法清除
速度：20,//初始转动速度
次数：0,//转动次数
周期：50,//转动基本次数：即至少需要转动多少次再进入抽奖环节
奖品：-1,//中奖位置
初始化：函数(id){
if ($(# id).查找(。彩票单位).长度0) {
$ lottery=$( # id)；
$units=$lottery.find(.彩票单位);
this.obj=$彩票；
这个。计数=$单位。长度；
$lottery.find(.彩票单元——“这个。索引).添加类(“活动”)；
};
},
roll:function(){
var index=this.index
var count=this.count
定义变量彩票=this.obj
$(抽奖)。查找(。彩票-单位-索引)。移除类(“active”)；
指数=1;
if (indexcount-1) {
索引=0;
};
$(抽奖)。查找(。彩票-单位-索引)。添加类(“活动”)；
this.index=index
返回错误的
},
停止：功能（索引){
this.prize=index
返回错误的
}
};
函数roll(){
彩票。次数=1；
彩票。roll()；//转动过程调用的是彩票的卷方法，这里是第一次调用初始化
如果(抽奖。时代彩票。第十周期彩票。奖金==彩票。指数){
清除超时(抽奖。定时器)；
彩票。奖品=-1；
彩票。次数=0；
点击=假；
}否则{
如果(抽奖。时代彩票。循环){
彩票。速度-=10;
} else if(抽奖。时代==彩票。循环){
var指数=数学。random()*(抽奖。count) 0；
彩票.奖金=索引；
}否则{
如果(抽奖。时代彩票。周期10((抽奖。奖金==0彩票。index==7) 彩票。奖品==彩票。索引1)){
彩票。速度=110;
}否则{
彩票。速度=20;
}
}
if (lottery.speed40) {
彩票。速度=40;
};
//控制台。日志(抽奖。^^^^^^时报彩票。速度^^^^^^^彩票。奖)；
lottery.timer=setTimeout(掷骰子，彩票。速度)；//循环调用
}
返回错误的
}
var click=false
window.onload=function(){
lottery.init(彩票);
$( #彩票a’).单击（函数(){
如果（点击){//点击控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
返回错误的
}否则{
彩票。速度=100;
roll()；//转圈过程不响应点击事件，会将点击置为错误的
点击=真；//一次抽奖完成后，设置点击为没错，可继续抽奖
返回错误的
}
});
};
/脚本
！-效果超文本标记语言结束-
/body
/html效果如下：
三、注意事项
1、抽奖过程说明
上面只是前端展示的效果。中奖物品通过一个随机数生成。
var指数=数学。random()*(抽奖。count) 0；真正开发中中奖物品是通过向后端接口发送请求返回的。
$( #彩票a’).单击（函数(){
var是log in=check log in()；
if(islogin){//已登录用户才能去抽奖
如果（点击){
返回错误的
}否则{
//向后端接口发请求返回中奖结果
var geturl=http://
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。