页面效果
:页面有6次抽奖机会,每次抽完奖会弹出领奖小弹窗(可选择不要),并在下方的已获列表中展示已获得的奖品列表
第一步,核心js:注释都在代码上
核心代码一:lottery.js
这个lottery.js是核心的js,里面包含了加载页面九宫格相关图片和文字的事件、抽奖事件、抽奖停转事件、奖品领取事件等等。奖品图片、跳转链接、中奖概率皆从后台接口返回的js中取。 暴露了四个方法名用以页面调用。
function lotteryService() {
var lottery = {
index: -1, //当前转动到哪个位置,起点位置
count: 0, //总共有多少个位置
timer: 0, //setTimeout的ID,用clearTimeout清除
speed: 20, //初始转动速度
times: 0, //转动次数
cycle: 50, //转动基本次数:即至少需要转动多少次再进入抽奖环节
prize: -1, //中奖位置
init: function () {
if ($("#lottery-unit").find(".grid-draw-item").length > 0) {
$units = $("#lottery-unit").find(".grid-draw-item");
this.obj = $("#lottery-unit");
this.count = $units.length - 1;
$("#lottery-unit").find(".unit-" + this.index).addClass("grid-draw-item-active");
}
;
},
roll: function () {
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(".unit-" + index).removeClass("grid-draw-item-active");
index += 1;
if (index > count - 1) {
index = 0;
};
$(lottery).find(".unit-" + index).addClass("grid-draw-item-active");
this.index = index;
return false;
},
stop: function (index) {
this.prize = index;
return false;
}
};
/*手机号*/
var mobile = '';
/*抽奖按钮是否可以点击,false 为可以点击*/
var click = false;
/*抽奖总次数*/
var count=6;
/*已抽次数*/
var doneCount=0;
/*所有奖品列表*/
var pricesJosn=[];
/*点击抽奖后滚动的效果*/
function roll() {
lottery.times += 1;
lottery.roll();//转动过程调用的是lottery的roll方法,这里是第一次调用初始化
/*当跑马灯停的时候*/
if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
clearTimeout(lottery.timer);
lottery.prize = -1;
lottery.times = 0;
click = false;
var cacheCountLength=0;
/*每次抽奖停下来的时候先从cookie中获取之前的抽奖次数*/
var cacheCount=utilService().getCookie(mobile + "cacheCount");
if(cacheCount!=null&&cacheCount!=undefined){
if(cacheCount==''){
cacheCountLength=0;
}else{
cacheCountLength=cacheCount.split(",").length;
}
/*若之前有抽过奖,那么已抽次数在之前的基础上+1*/
doneCount=cacheCountLength+1;
}else{
doneCount=6;
}
/*总次数-已抽次数=剩余次数 大于零,防止出现抽奖次数为负数的情况*/
if(count-doneCount>=0){
$("#surplusNum").html(count-doneCount);
showPriceDetails(lottery.index);
$('.grid-draw-modal').show()
}
} else {
if (lottery.times < lottery.cycle) {
lottery.speed -= 10;
} else if (lottery.times == lottery.cycle) {
/*根据各奖品概率获取中奖位置*/
apiService().findIndexByRate().then(function (res){
lottery.prize = res;
});
} else {
if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
lottery.speed += 110;
} else {
lottery.speed += 20;
}
}
if (lottery.speed < 40) {
lottery.speed = 40;
};
lottery.timer = setTimeout(roll, lottery.speed);//循环调用
}
return false;
}
/*领取奖品*/
function openNewPage(url) {
window.location.href = url;
sessionStorage.setItem(JSON.parse(sessionStorage.formMap).mobile + "-openNewPage", "true");
}
/*加载九宫格小图片*/
function loadLottryImgMini() {
apiService().getLotteryJson().then(function (res){
pricesJosn=res;
});
for(var i=0;i<8;i++){
var priceimgDiv='<img src="'+pricesJosn[i].imgsrcMini+'" alt="">';
$("#price-imgMini-"+i).html("");
$("#price-imgMini-"+i).append(priceimgDiv);
}
}
/*加载九宫格抽奖停转时弹窗中的图片文字及链接内容*/
function loadLottryImgBig(index) {
if (index == 0) {
$("#price-name").html(pricesJosn[0].title);
$("#price-img").append('<img src="'+pricesJosn[0].imgsrcBig+'" alt="">');
$("#receiveprice").attr("onclick", "lotteryService().openNewPage('"+pricesJosn[0].link+"')")
} else if (index == 1) {
$("#price-name").html(pricesJosn[1].title);
$("#price-