PHP+Ajax微信手機端九宮格抽獎例項
阿新 • • 發佈：2019-08-18
PHP+Ajax結合lottery.js製作的一款微信手機端九宮格抽獎例項，抽獎完成後有收貨地址新增表單出現。支援可以設定中獎概率等。
獎品列表
<div class="lottery_list clearfix" id="lottery"> <ul> <li class="lottery-unit lottery-unit-0 lottery-1"><img src="images/1.png"></li> <li class="lottery-unit lottery-unit-1 lottery-2"><img src="images/2.png"></li> <li class="lottery-unit lottery-unit-2 lottery-3"><img src="images/3.png"></li> <li class="lottery-unit lottery-unit-7 lottery-4"><img src="images/4.png"></li> <li><a href="javascript:void(0);"><img src="images/middle.jpg"></a></li> <li class="lottery-unit lottery-unit-3 lottery-5"><img src="images/5.png"></li> <li class="lottery-unit lottery-unit-6 lottery-6"><img src="images/6.png"></li> <li class="lottery-unit lottery-unit-5 lottery-7"><img src="images/7.png"></li> <li class="lottery-unit lottery-unit-4 lottery-8"><img src="images/8.png"></li> </ul> </div>
Ajax抽獎
$.post("ajax.php", function(data) { //獲取獎品，也可以在這裡判斷是否登陸狀態 if (data.prize_id != '' && data.prize_id != undefined) { var prize_site = $(".lottery-" + data.prize_id).attr("data-ord"); $("#lottery").attr("prize_site", prize_site); $("#lottery").attr("prize_id", data.prize_id); $("#lottery").attr("prize_name", data.prize_name); $("#lottery").attr("prize_pic", data.prize_pic); if (data.code == 200) { $("#lottery").attr("contact_name", data.contact_name); $("#lottery").attr("contact_mobile", data.contact_mobile); $("#lottery").attr("contact_addr", data.contact_addr); } roll(); click = true; return false; } else { showLotteryTip(data.error); } }, "json")
儲存收貨地址
$.post("ajax.php", {contact_name: contact_name, contact_mobile: contact_mobile, contact_addr: contact_addr}, function(data) {
$("#lottery_addr_box").modal('hide');
if (data.code == 200) {
$("#tip_words").html("提交成功！");
getModalBox('#lottery_tip');
} else {
showLotteryTip(data.error);
}