php jquery ajax九宫格抽奖,jQuery九宫格抽奖
插件描述:网页中常用的九宫格抽奖代码
更新时间: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
}
php jquery ajax九宫格抽奖,jQuery九宫格抽奖相关推荐
- 【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数,获取DataTable Json,Asp.net
直接上图=============最后拷贝源码(图片清楚) ====================================================================== ...
- jquery ajax实例 php,jquery中各个ajax实例操作
jquery_ajax.html $(document).ready(function(){ //jquery.ajax() $("#button1").click(functio ...
- mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页 简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
- jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
- jquery ajax content type,JQuery ajax的contentType
原理说明 Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.XMLHttpRequest是ajax的核 ...
- jquery ajax设置头部,jQuery Ajax 设置请求头
今日在项目ajax访问中 获取接口地址,出现一个这样的错误: Request header field Access-Token is not allowed by Access-Control-Al ...
- jsp jquery ajax请求,JSP+jquery使用ajax方式调用json的实现方法
本文实例讲述了JSP+jquery使用ajax方式调用json的实现方法.分享给大家供大家参考,具体如下: //test function test(uid) { if(confirm("确 ...
- PHP、Smarty与jQuery Ajax 分页插件jquery.pager.js的使用
1.首先建立一个PHP文件,用于查询数据: (具体查询数据及显示可以根据需要修改,本例中使用了一个Dept表,有两个字段:DeptCode和DeptName,处理结果集的方式也可以根据自己使用的数据访 ...
- jquery ajax实例get,jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: $.get(url, [dat ...
- jquery ajax请求缓存,jQuery ajaxSetup() 方法及ajax缓存问题
定义和用法 ajaxSetup() 方法为将来的 AJAX 请求设置默认值. 下面的表格中列出了可能的名称/值: 名称 值/描述 async 布尔值,表示请求是否异步处理.默认是 true. befo ...
最新文章
- linux c:关联变量的双for循环
- WPF实现环(圆)形菜单
- leetcode193. 有效电话号码 正则了解一下
- c++用什么软件编程_学习编程用什么做笔记比较好?
- 手机网站按住放大图片_这6个鲜为人知的黑科技网站,我可以玩一天
- 如何在AngularJS中有条件地应用CSS样式?
- JavaScript中调皮的undefined
- Linux下java获取屏幕分辨率,关于Android如何获取屏幕分辨率的例子
- 拓端tecdat|维度规约(降维)算法在WEKA中应用
- 空洞卷积的超详细解释
- 移动端Web组件-Dialog对话框
- 荔枝派zero编译rtl8723bs驱动并连接WiFi
- 优化UE4性能 、减少DrawCall——材质中使用自定义基元数据
- 最新版CAD都有些啥功能(下)
- 魔兽世界怀旧服务器无限刷怪点,魔兽世界怀旧服50级刷怪地点汇总
- 使用计算机处理问题的步骤,1.1计算机解决问题的过程 计算机解决问题的5个步骤...
- Jenkins:解决tomcat在job结束时关闭问题
- android抓包 dns,利用 dns 实现 app简易抓包
- Gradle教程 Spring源码编译
- 迪文DWIN串口屏的使用经验分享(最新添加了T5L新产品体验)
热门文章
- 码蹄集第23周赛(买礼物,召唤神龙,大促销,轨道探测)
- 手机禁止安装app,刷机才能恢复
- 数学 余式定理 简介
- IBM李永辉:从人工智能到大数据的终点
- 七段数码显示管—设计报告,visio图,Multisim仿真
- Multisim实现极简数码管显示
- 微软员工和 GitHub 员工宣布支持 996.ICU 运动,来签个名呗?
- 汇编条件判断 eq neq
- 时间序列分类01:人类活动识别深度学习模型综述
- MySQL插入emoji表情错误的2种解决方案,Incorrect string value: '\xF0\x9F\x98\x84'