var redBag = (function () {
var initialed = false,
raining = true,
createInterval,
walkInterval,
createIntervalTime = 500,//生成红包间隔时间
walkIntervalTime = 30,//红包动画的间隔时间
imgPath = 'img/',
images = ['monkey1.png', 'monkey2.png', 'monkey3.png', 'monkey4.png', 'monkey5.png', 'monkey6.png','monkey7.png','monkey8.png','monkey9.png','monkey10.png'],
windowWidth = $(window).width(),
windowHeight = $(window).height(),
callback = null;
/**
* 设置定时器
*/
function redBagSetInterval() {
if (raining && !createInterval) {
createInterval = setInterval(createRedBag, createIntervalTime);
}
if (raining && !walkInterval) {
walkInterval = setInterval(walk, walkIntervalTime);
}
}
/**
* 清除定时器
*/
function redBagClearInterval() {
if (createInterval) {
clearInterval(createInterval);
createInterval = null;
}
if (walkInterval) {
clearInterval(walkInterval);
walkInterval = null;
}
}
/**
* minValue 最小值
* maxValue 最大值
*/
function generateRandom(minValue, maxValue) {
/**
* 取值范围总数
*/
var choices = maxValue - minValue + 1;
return Math.floor(Math.random() * choices + minValue);
}
function createRedBag() {
var leftValue = generateRandom(0, windowWidth);
/**
* 图片随机出现
*/
var imgSrc = imgPath + images[generateRandom(0, images.length - 1)];
//
$('<img src="' + imgSrc + '"/>').addClass('red-bag').css({left: leftValue + 'px'})
//30
.data('step', 3)
.appendTo('.red-bag-wrap');
}
/**
* 红包运动
*/
function walk() {
$('.red-bag').each(function () {
$(this).css({top: parseInt($(this).css('top')) + $(this).data('step') + 'px'});
//
if (windowHeight <= parseInt($(this).css('top'))) {
$(this).remove();
}
});
}
function redBagWrapDelegate() {
/**
* 红包选中事件
*/
$('.red-bag-wrap').delegate('.red-bag', 'click', function () {
raining = false;
redBagClearInterval();
loadingUtil.show();
//这边需要后台交互，后台判断是否已经参与活动，是否中奖（后台随机生成）
try {
var redBagAjax = $.ajax({
url: 'http://www.wood365.com/Ashx/MarAct.ashx?' + Math.random(), //请求的URL
type: 'POST',
timeout: 1000, //超时时间设置，单位毫秒
dataType: 'json',//返回的数据格式
success: function (data) { //请求成功的回调函数
var status = data.status;
var message = '';
switch (status) {
case 0:
message = '恭喜您获得' + data.prize + '，我们会在\
3个工作日内将奖品寄送到您注册时所\
填的地址，如有其他疑问请联系客服！';
break;
case 1:
message = '抱歉，该红包中没有奖品哦，继续加油吧！';
break;
case 2:
message = '抱歉！您已无抽奖机会.';
break;
default :
break;
}
requestDone(message);
},
error: function (data) { //请求失败的回调函数
requestDone('网络有问题，请重试');
},
complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数
if (status == 'timeout') {//超时,status还有success,error等值的情况
redBagAjax.abort();
requestDone('请求超时，请重试');
}
}
});
}
catch(e) {
requestDone('出错了，请重试');
}
function requestDone(message) {
loadingUtil.hide();
$('.red-bag-result p').text(message);
$('.red-bag-result-mask').show();
$('.red-bag-wrap').undelegate('.red-bag', 'click');
$('.red-bag').addClass('no-click');
//2016-3-3新添加
$('.close-wrap').unbind('click');
}
//test start
//setTimeout(function () {
// var status = generateRandom(0,2);
// var message = '';
// switch (status) {
// case 0:
// message = '恭喜您获得 iPhone 6S 一台，我们会在\
// 3个工作日内将奖品寄送到您注册时所\
// 填的地址，如有其他疑问请联系客服！';
// break;
// case 1:
// message = '抱歉，该红包中没有奖品哦，继续加油吧！';
// break;
// case 2:
// message = '抱歉！您已无抽奖机会.';
// break;
// default :
// break;
// }
//
// loadingUtil.hide();
// $('.red-bag-result p').text(message);
// $('.red-bag-result-mask').show();
// $('.red-bag-wrap').undelegate('.red-bag', 'click');
//$('.red-bag').addClass('no-click');
//}, 2000);
// test end
});
}
var init = function () {
initialed = true;
/**
* body添加class名为red-bag-wrap
*/
$('<div></div>').addClass('red-bag' +
'-wrap')
.width(windowWidth)
.height(windowHeight)
.appendTo('body');
/**
* 添加关闭
*/
$('<div></div>').addClass('close-relative').appendTo('.red-bag-wrap');
$('<div></div>').addClass('close-wrap').appendTo('.close-relative');
$('<img src="img/close.png" />').appendTo('.close-wrap');
//2016-3-3关闭按钮回到初始页面
$('.close-wrap').on('click',function() {
stop();
});
$('<div></div>').addClass('red-bag-result-mask').hide().appendTo('.red-bag-wrap');
$('<div></div>').addClass('red-bag-result').appendTo('.red-bag-result-mask');
$('<p></p>').appendTo('.red-bag-result');
$('<div></div>').addClass('red-bag-close').appendTo('.red-bag-result');
/**
* 钱包确定点击事件
*/
$('.red-bag-close').on('click', function () {
raining = true;
redBagWrapDelegate();//这是猴子的点击事件
$('.red-bag').removeClass('no-click');
$('.red-bag-result-mask').hide();
redBagSetInterval();
$('.red-bag-mask').remove();
//2016-3-3福袋的时候关闭
$('.close-wrap').on('click',function() {
stop();
});
});
//
redBagSetInterval();
/**
* 生成红包
*/
redBagWrapDelegate();
$(window).resize(function () {
windowWidth = $(window).width();
windowHeight = $(window).height();
$('.red-bag-wrap').width(windowWidth).height(windowHeight);
});
window.onfocus = function () {
redBagSetInterval();
};
window.onblur = function () {
redBagClearInterval();
};
$(document).unload(function () {
redBagClearInterval();
});
};
//开始
var start = function (fn) {
if(typeof fn === 'function') {
callback = fn;
}
if(!initialed) {
init();
}
else {
resume();
}
};
//停止
var stop = function () {
$('.red-bag-wrap').hide();
redBagClearInterval();
$('.red-bag').remove();
callback();
};
//继续
var resume = function () {
$('.red-bag-wrap').show();
redBagSetInterval();
};
return {
start: start,
stop: stop
}
}());
$(function () {
function redBagBtnBindClick() {
$('.red-bag-btn').on('click', function () {
$('.red-bag-btn').unbind('click');
redBag.start(redBagBtnBindClick);
});
}
redBagBtnBindClick();
});