這篇文章主要講解了“怎么用PHP+Ajax實現手機端九宮格抽獎程序”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“怎么用PHP+Ajax實現手機端九宮格抽獎程序”吧!
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); } }, "json")
感謝各位的閱讀,以上就是“怎么用PHP+Ajax實現手機端九宮格抽獎程序”的內容了,經過本文的學習后,相信大家對怎么用PHP+Ajax實現手機端九宮格抽獎程序這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。