jQuery九宫格抽奖

 查看演示  website  立即下载

更新时间：2017/2/16 下午6:56:04

更新说明：  

    1.代码进行了优化；

    2.更新了实际项目中用到的ajax接口请求，案例中注释便于展示效果；

    3.主要解决了留言用户所提出的问题；

    4.手机移动端展示效果后续更新，敬请期待......

1、抽奖逻辑说明

上面只是前端展示的效果。中奖物品通过一个随机数生成。

var index = Math.random()*(lottery.count)|0;

真正开发中中奖物品是通过向后端接口发送请求返回的。

$("#lottery a").click(function() {
	var islogin = checkLogin();
	if (islogin) { //已登录用户才能去抽奖
		if (click) {
			return false;
		} else {
			//向后端接口发请求返回中奖结果
			var geturl = "http://xxxxxx?username=" + username + "&token=" + token;
			$.ajax({　url: geturl,
				type: "GET",
				dataType: "json",
				async: false,
				success: function(data) {
					if (data.errorcode == 0) {
						var rewardid = data["message"]["rewardid"];
						var cardno = data["message"]["rewardCardNo"];
						var passno = data["message"]["rewardCardPass"];
						var prize = -1;
						var content = "";
						if (rewardid == "iphone6") {
							lottery.prize = 0;
							prize = 0;
							content = "一部iphone6手机";
							$("#content1").html(content);
						} else if (rewardid == "PPTVKING") {
							lottery.prize = 1;
							prize = 1;
							content = "一部PPTV KING7s  3D影音手机";
							$("#content1").html(content);
							//...    
						} else if (rewardid == "legao") {
							lottery.prize = 5;
							prize = 5;
							content = "一份乐高的玩具";
							$("#content1").html(content);
						}

						lottery.speed = 100;
						roll();
						click = true;
						return false;
					} else {
						//错误处理
						if (data.errorcode == 3) {
							$("#novip").show();
						} else {
							$("#notime").show();
						}
					}
				}
				//function结束
			});
			//ajax结束
		}
		//lse结束
	}
});

2、兼容性说明

.mask开始如下，用的是rgba，但是IE8不兼容，改为使用png图片background:url(images/mask.png) no-repeat;(ps:mask.png可自己根据产品设计稿切图)

.mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(252,211,4,0.5);
    display: none
}

PREVIOUS:
NEXT:
HTML5实现响应式多角度全屏滑动切换特效
jquery拼音模糊查询