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
}


相关插件-游戏

vue跳跳棋游戏(原创)

新鲜出炉的原创跳跳棋游戏,基于vue.js实现,游戏的逻辑及实现方法在js中解释的很清楚,插件的调用也非常简单。
  游戏
 1851  8

简易版俄罗斯方块

js简易版俄罗斯方块,注释比较全,有需要的可以研究下。
  游戏
 5042  26

原生jQuer贪吃蛇游戏(原创)

原生jQuer贪吃蛇游戏,请大家参考。
  游戏
 2660  7

js推箱子小游戏

html5 canvas绘制小人推箱子小游戏,代码注释很全,修改简单。
  游戏
 3894  21

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

    创悦渠道-镇名 0
    2018/2/19 2:23:24
    这是我在jq上看的写的最好的代码。不难看出该作品的作者是一位认真、负责、热诚的程序员。
    这个作品让我学会了不少东西。特别回复一下感谢。
        许尊少0
        2018/2/22 9:36:11
        谢谢亲的认可,新年快乐!
    回复
    Roy 0
    2018/2/17 1:47:38
    这个看起来真不错,谢谢作者
        许尊少0
        2018/2/22 9:37:03
        新年快乐!谢谢亲的认可!
    回复
    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

        谢谢支持!

    回复
取消回复