移动端 – 九宫格抽奖_百厌_前端开发者

九宫格抽奖Demo

九宫格抽奖模型&html拼接模型
 

九宫格.png

九宫格抽奖模型&html拼接模型

九宫格.png

拼接图.png

**注 **:当动态实现九宫格奖品信息展示时,若想按照图1位置显示奖品信息,则此时需要换一下九宫格的位置。
替换位置为:4→8、6→4、8→6、9→5、5→○(○即抽奖按钮)。

拼接图.png

封装九宫格奖品列表排序方法

封装九宫格奖品列表排序方法

/* 九宫格奖品列表排序 */
function sortList(data, el) {
	var ID4,
		str = '';
	for (var i = 0; i < data.length; i++) {
		if (i == 3) {
			//3->7
			str += "<div class='prize jp-" + 7 + "'><img src='" + data[i].pic + "'><p>" + data[i].name + '</p></div>';
		} else if (i == 4) {
			// 4
			ID4 = 4;
			str += "<div id='Btn'><p>开始抽奖</p></div>";
		} else if (i == 5) {
			//5->3
			str += "<div class='prize jp-" + 3 + "'><img src='" + data[i].pic + "'><p>" + data[i].name + '</p></div>';
		} else if (i == 7) {
			//7->5、8->4
			str +=
				"<div class='prize jp-" +
				5 +
				"'><img src='" +
				data[i].pic +
				"'><p>" +
				data[i].name +
				"</p></div><div class='prize jp-" +
				ID4 +
				"'><img src='" +
				data[ID4].pic +
				"'><p>" +
				data[ID4].name +
				'</p></div>';
		} else {
			str += "<div class='prize jp-" + i + "'><img src='" + data[i].pic + "'><p>" + data[i].name + '</p></div>';
		}
	}
	$('#' + el).html(str);
}

//初始化抽奖按钮点击属性
var click = false;

/* 九宫格奖品列表排序 */
function sortList(data, el) {
var ID4,
str = '';
for (var i = 0; i < data.length; i++) {
if (i == 3) {
//3->7
str += "<div class='prize jp-" + 7 + "'><img src='" + data[i].pic + "'><p>" + data[i].name + '</p></div>';
} else if (i == 4) {
// 4
ID4 = 4;
str += "<div id='Btn'><p>开始抽奖</p></div>";
} else if (i == 5) {
//5->3
str += "<div class='prize jp-" + 3 + "'><img src='" + data[i].pic + "'><p>" + data[i].name + '</p></div>';
} else if (i == 7) {
//7->5、8->4
str +=
"<div class='prize jp-" +
5 +
"'><img src='" +
data[i].pic +
"'><p>" +
data[i].name +
"</p></div><div class='prize jp-" +
ID4 +
"'><img src='" +
data[ID4].pic +
"'><p>" +
data[ID4].name +
'</p></div>';
} else {
str += "<div class='prize jp-" + i + "'><img src='" + data[i].pic + "'><p>" + data[i].name + '</p></div>';
}
}
$('#' + el).html(str);
}

//初始化抽奖按钮点击属性
var click = false;

初始全局变量(获奖奖品下标)

初始全局变量(获奖奖品下标)

// 奖品列表
var prizeList,
	// 中奖下标(在奖品列表中的下标)
	prizeObj = {
		pIndex: ''
	};

// 奖品列表
var prizeList,
// 中奖下标(在奖品列表中的下标)
prizeObj = {
pIndex: ''
};

奖品动画初始化

奖品动画初始化

var luck = {
	index: -1, //当前转动到哪,起点位置
	count: 0, //共有多少个位置
	timer: 0, //setTimeout的ID,用clearTimeout清除
	speed: 20, //初始化转动速度
	times: 0, //转动次数
	cycle: 25, //转动基本次数:即转动多少次之后进入抽奖环节
	prize: -1, //中奖位置
	init: function(id) {
		if ($('#' + id).find('.prize').length > 0) {
			$luck = $('#' + id);
			$units = $luck.find('.prize');
			this.obj = $luck;
			this.count = $units.length;
			$luck.find('.jp-' + this.index).addClass('active');
		}
	},
	roll: function() {
		var index = this.index;
		var count = this.count;
		var luck = this.obj;
		$(luck).find('.jp-' + index).removeClass('active');
		index += 1;
		if (index > count - 1) index = 0;
		$(luck).find('.jp-' + index).addClass('active');
		this.index = index;
		return false;
	},
	stop: function(index) {
		this.prize = index;
		return false;
	}
};

var luck = {
index: -1, //当前转动到哪,起点位置
count: 0, //共有多少个位置
timer: 0, //setTimeout的ID,用clearTimeout清除
speed: 20, //初始化转动速度
times: 0, //转动次数
cycle: 25, //转动基本次数:即转动多少次之后进入抽奖环节
prize: -1, //中奖位置
init: function(id) {
if ($('#' + id).find('.prize').length > 0) {
$luck = $('#' + id);
$units = $luck.find('.prize');
this.obj = $luck;
this.count = $units.length;
$luck.find('.jp-' + this.index).addClass('active');
}
},
roll: function() {
var index = this.index;
var count = this.count;
var luck = this.obj;
$(luck).find('.jp-' + index).removeClass('active');
index += 1;
if (index > count - 1) index = 0;
$(luck).find('.jp-' + index).addClass('active');
this.index = index;
return false;
},
stop: function(index) {
this.prize = index;
return false;
}
};

时间、转速、中奖下标控制

时间、转速、中奖下标控制

/* 时间、速度、中奖编号控制 */
function roll() {
	luck.times += 1;
	luck.roll();
	if (luck.times > luck.cycle + 10 && luck.prize == luck.index) {
		clearTimeout(luck.timer);
		luck.prize = -1;
		luck.times = 0;
		click = false;
	} else {
		if (luck.times < luck.cycle) {
			luck.speed -= 20;
		} else if (luck.times == luck.cycle) {
			// 奖品位置下标 全局变量prizeObj对象为中奖信息
			if (prizeObj.pIndex != '') luck.prize = prizeObj.pIndex;
		} else {
			if (
				luck.times > luck.cycle + 10 &&
				((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)
			) {
				luck.speed += 110;
			} else {
				luck.speed += 20;
			}
		}
		if (luck.speed < 40) luck.speed = 40;
		luck.timer = setTimeout(roll, luck.speed);
	}
	return false;
}

/* 时间、速度、中奖编号控制 */
function roll() {
luck.times += 1;
luck.roll();
if (luck.times > luck.cycle + 10 && luck.prize == luck.index) {
clearTimeout(luck.timer);
luck.prize = -1;
luck.times = 0;
click = false;
} else {
if (luck.times < luck.cycle) {
luck.speed -= 20;
} else if (luck.times == luck.cycle) {
// 奖品位置下标 全局变量prizeObj对象为中奖信息
if (prizeObj.pIndex != '') luck.prize = prizeObj.pIndex;
} else {
if (
luck.times > luck.cycle + 10 &&
((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)
) {
luck.speed += 110;
} else {
luck.speed += 20;
}
}
if (luck.speed < 40) luck.speed = 40;
luck.timer = setTimeout(roll, luck.speed);
}
return false;
}

加载抽奖动画

加载抽奖动画

luck.init('prizeBox');
/* 点击抽奖 */
$('#Btn').click(function() {
	if (click) {
		return false;
	} else {
		$.ajax({
			async: false,
			url: 'url',
			type: 'post',
			data: {},
			dataType: 'json',
			success: function(res) {
				if (res.code) {
					/* 寻找商品下标 */
					// 寻找中奖商品下标代码...

					/* 动画 */
					// 初始转速
					luck.speed = 100;
					// 触发动画
					roll();
					// 激活点击事件
					click = true;
					// 延时动画
					setTimeout(function() {
						$('#mask').fadeIn();
					}, 3600);
					return false;
				} else {
					alert(res.message);
				}
			}
		});
		return false;
	}
});

luck.init('prizeBox');
/* 点击抽奖 */
$('#Btn').click(function() {
if (click) {
return false;
} else {
$.ajax({
async: false,
url: 'url',
type: 'post',
data: {},
dataType: 'json',
success: function(res) {
if (res.code) {
/* 寻找商品下标 */
// 寻找中奖商品下标代码...

/* 动画 */
// 初始转速
luck.speed = 100;
// 触发动画
roll();
// 激活点击事件
click = true;
// 延时动画
setTimeout(function() {
$('#mask').fadeIn();
}, 3600);
return false;
} else {
alert(res.message);
}
}
});
return false;
}
});

中奖奖品位置的判断(回显到九宫格上)

中奖奖品位置的判断(回显到九宫格上)

function findPirzeIndex(data, goodId) {
	for (let j = 0, len = data.length; j < len; j++) {
		if (data[j].goodId == goodId) {
			switch (j) {
				case 0:
					prizeObj.pIndex = 0;
					break;
				case 3: // 3->7
					prizeObj.pIndex = 7;
					break;
				case 4: //
					prizeObj.pIndex = 4;
					break;
				case 5: // 5->3
					prizeObj.pIndex = 3;
					break;
				case 7: // 7->5
					prizeObj.pIndex = 5;
					break;
				default:
					prizeObj.pIndex = j;
			}
		}
	}
}

function findPirzeIndex(data, goodId) {
for (let j = 0, len = data.length; j < len; j++) {
if (data[j].goodId == goodId) {
switch (j) {
case 0:
prizeObj.pIndex = 0;
break;
case 3: // 3->7
prizeObj.pIndex = 7;
break;
case 4: //
prizeObj.pIndex = 4;
break;
case 5: // 5->3
prizeObj.pIndex = 3;
break;
case 7: // 7->5
prizeObj.pIndex = 5;
break;
default:
prizeObj.pIndex = j;
}
}
}
}

:通过该方法来查找中奖奖品的位置;查找的元素的下标为该元素在其数组对象中的位置下标,此时对比图1和图2两个图表的位置信息,就可以确定中奖奖品所在图1表盘的具体位置。

» 本文来自:前端开发者 » 《移动端 – 九宫格抽奖_百厌_前端开发者》
» 本文链接地址:https://www.rokub.com/73408.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!