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
}


相关插件-游戏

h5贪吃蛇动画

h5画布,贪吃蛇简单动画
  游戏
 10441  32

js版单机斗地主

js版单机斗地主,代码注释全,学习必备。
  游戏
 4458  34

程序员求签

程序员求签
  游戏
 7634  34

军旗版2048小游戏源码

休闲小游戏。仿照2048军旗版。
  游戏
 5430  38

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

    ymfever 0
    2017/11/28 17:19:19

    有一个bug 在转盘快要停止的时候 连续点击的话  会重新加速旋转  也就是调用了getLottery()函数,希望能优化

        许尊少1
        2017/11/29 9:30:14

        亲,那个不是bug,那时候已经抽完奖了,正常流程下应该会出现一个弹框遮罩层,你可以查看一下控制台有一个console.log日志,此demo没有添加弹框提示。

    回复
    指间流沙 0
    2017/11/16 9:53:27

    怎样获取jq币啊

        许尊少0
        2017/11/16 11:51:18
        每日签到可得;在线充值可得;发布插件可得;
    回复
    烈火王者 0
    2017/9/8 13:48:49
    LOME_NEW 0
    2017/8/2 16:20:46
    不错 正好可以用 回复
    秦雨墨 0
    2017/6/21 15:21:09
    请问,我注释了那个随机函数,换了接口地址,为什么place是0,为什么switch没起作用
        许尊少0
        2017/11/29 9:33:45
        switch的case是接口回传的抽奖名称,你可以打印日志,看看接口返回的是什么
    回复
    .Tree 0
    2017/5/31 19:00:44

    很不错 兼容性也很好。

        秦雨墨0
        2017/6/21 15:28:36

        你好 能交流下么

    回复
    Konfuzius 0
    2017/5/26 19:05:36
    普罗提亚的等待 0
    2017/5/19 15:39:47
    厉害了,代码很清晰。很明白,一下子就看懂了。。辛苦辛苦
        许尊少0
        2017/5/31 21:11:34

        谢谢支持!

    回复
    ぃMissnざ°唯美 0
    2017/5/4 9:53:57

    写的特别好,代码注释清晰

    回复
    静坐庭前,赏花落 0
    2017/4/5 23:15:20
    点击抽奖按钮后    且转盘没有停止之前     为啥还能点击,在哪里设置,不让点击,请赐教,谢谢
        五菱宏光集团董事长1
        2017/4/12 16:16:32
        var isclick = false
        function() {
            //点击抽奖       
            if (isclick) return
            //dosomething   
            isclick = true
        }
    回复
取消回复