jQuery九宫格抽奖

所属分类:其他-游戏

 3460  40  查看评论 (7)
jQuery九宫格抽奖 ie兼容9

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摇一摇插件slotmachine.js

一个简单的,轻量级的jQuery插件,摇一摇的动画效果。
  游戏
 20477  35

好玩的JS原生打砖块游戏。

好玩的JS原生打砖块游戏,有待拓展。
  游戏
 2830  12

自由拼图游戏

可以选择多种难度,每个区块可以自由拖动。可兼容手机
  游戏
 8160  58

mk.js:基于HTML5的格斗游戏

mk.js是一个使用HTML5 canvas和JavaScript创建的简单格斗游戏。该游戏是开源的,源码托管在Github上。
  游戏
 10448  20

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

    我的心里住着小傲娇0
    2016/12/9 14:12:51
    可以自定义每件物品的得奖概率吗 回复
    ?╊???ζ Arvin?0
    2016/11/18 19:11:31
    几下就中了iphone6
        我的心里住着小傲娇0
        2016/12/9 14:12:54
        我也是
    回复
    ?jeson・0
    2016/11/16 16:11:34
    有没有手机移动用的?
        许尊少0
        2016/11/17 11:11:47
        后续优化以及更新响应式效果
    回复
    DIV0
    2016/11/16 15:11:45
    没有回调函数 不能适应移动设备 
        许尊少0
        2016/11/17 11:11:43
        由于项目急,当前js写的有点匆忙,后续优化以及更新响应式效果
    回复
取消回复
    PROMULGATOR

    许尊少

    北京市北京网联光通技术有限公司(信联云网)