jQuery九宫格抽奖

所属分类:其他-游戏

jQuery九宫格抽奖 ie兼容9

更新时间: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
}


相关插件-游戏

jQuery h5老虎机

jQuery h5老虎机demo
  游戏
 10859  25

20行 js 写的 贪吃蛇游戏

不到20行js代码 ,写的贪吃蛇小游戏 附带完善版本
  游戏
 5560  18

HTML5实现水果忍者

这是一款由百度JS小组提供的HTML5版切水果游戏,这款基于HTML5实现的网页版切水果游戏虽然和原版的切水果游戏相比仍有美中不足之处,但也算有声有色,画面效果也十分炫目华丽。
  游戏
 12731  56

HTML5 塔防游戏

HTML5 塔防游戏
  游戏
 8284  40

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币

    我的心里住着小傲娇 0
    2016/12/9 14:12:51
    可以自定义每件物品的得奖概率吗
        许尊少0
        2017/2/17 16:31:36
        得奖概率后台可设置,js请求中奖接口,通过返回的数据指定中将物品,本案例写了个随机算法进行抽奖演示效果的
    回复
    ?╊???ζ Arvin? 0
    2016/11/18 19:11:31
    几下就中了iphone6
        我的心里住着小傲娇0
        2016/12/9 14:12:54
        我也是
        许尊少0
        2017/2/17 16:32:38

        本案例通过随机算法进行抽奖演示效果的,实际项目可通过ajax请求中奖接口返回数据指定停在中奖物品

    回复
    ?jeson・ 0
    2016/11/16 16:11:34
    有没有手机移动用的?
        许尊少0
        2016/11/17 11:11:47
        后续优化以及更新响应式效果
    回复
    DIV 0
    2016/11/16 15:11:45
    没有回调函数 不能适应移动设备 
        许尊少0
        2016/11/17 11:11:43
        由于项目急,当前js写的有点匆忙,后续优化以及更新响应式效果
        许尊少0
        2017/2/17 16:33:23

        本案例源代码已更新,已增加回调函数,案例中代码已注释并标注说明了

        弱虫?0
        2017/3/17 18:22:08
        很厉害 学习了 感谢你
    回复
取消回复