PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的。

在页面上放置6个奖项:

 <ul id="prize">
<li class="red" title="点击抽奖">1</li>
<li class="green" title="点击抽奖">2</li>
<li class="blue" title="点击抽奖">3</li>
<li class="purple" title="点击抽奖">4</li>
<li class="olive" title="点击抽奖">5</li>
<li class="brown" title="点击抽奖">6</li>
</ul>

点击每个方块,触发的事件:

 $("#prize li").each(function() {
var p = $(this);
var c = $(this).attr('class');
p.css("background-color", c);
p.click(function() {
$("#prize li").unbind('click'); //连续翻动
$.getJSON("ajax.php",
function(json) {
var prize = json.yes; //抽中的奖项
p.flip({
direction: 'rl',
//翻动的方向rl:right to left
content: prize,
//翻转后显示的内容即奖品
color: c,
//背景色
onEnd: function() { //翻转结束
p.css({
"font-size": "22px",
"line-height": "100px"
});
p.attr("id", "r"); //标记中奖方块的id
$("#viewother").show(); //显示查看其他按钮
$("#prize li").unbind('click').css("cursor", "default").removeAttr("title");
}
});
$("#data").data("nolist", json.no); //保存未中奖信息
});
});
});

翻开其他方块:

 $("#viewother").click(function() {
var mydata = $("#data").data("nolist"); //获取数据
var mydata2 = eval(mydata); //通过eval()函数可以将JSON转换成数组
$("#prize li").not($('#r')[0]).each(function(index) {
var pr = $(this);
pr.flip({
direction: 'bt',
color: 'lightgrey',
content: mydata2[index],
//奖品信息(未抽中)
onEnd: function() {
pr.css({
"font-size": "22px",
"line-height": "100px",
"color": "#333"
});
$("#viewother").hide();
}
});
});
$("#data").removeData("nolist");
});

本文转自:https://www.sucaihuo.com/php/118.html 转载请注明出处!

PHP+jQuery开发简单的翻牌抽奖实例的更多相关文章

  1. html + css + jquery实现简单的进度条实例

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  2. 简单的jquery拖曵原理js特效实例

    <!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="jav ...

  3. [转]jquery开发自定义的插件总结

    本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...

  4. 使用SharePoint Designer定制开发员工工作日志系统实例!

    昨天已介绍了一篇<使用SharePoint Designer定制开发专家库系统实例!>,今天继续来介绍使用SharePoint Designer定制开发员工工作日志系统实例,主要功能包括填 ...

  5. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  6. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  7. 《深入PHP与jQuery开发》读书笔记——Chapter3

    <深入PHP与jQuery开发>第三章学习笔记 1.PHP的魔术方法(在对象中发生某些例行事件时会自动调用这些方法) PHP提供了魔术方法__construct()(构造函数),在新对象被 ...

  8. 《深入PHP与jQuery开发》读书笔记——Chapter1

    由于去实习过后,发现真正的后台也要懂前端啊,感觉javascript不懂,但是之前用过jQuery感觉不错,很方便,省去了一些内部函数的实现. 看了这一本<深入PHP与jQuery开发>, ...

  9. 用Spring MVC开发简单的Web应用

    这个例子是来自于Gary Mak等人写的Spring攻略(第二版)第八章Spring @MVC中的一个例子,在此以学习为目的进行记录. 问题:想用Spring MVC开发一个简单的Web应用, 学习这 ...

随机推荐

  1. JS---DOM---事件冒泡和阻止事件冒泡,总结事件

    事件冒泡: 多个元素嵌套, 有层次关系 ,这些元素都注册了相同的事件, 如果里面的元素的事件触发了, 外面的元素的该事件自动的触发了     事件有三个阶段: 1.事件捕获阶段  :从外向内 2.事件 ...

  2. linux vscode 编译配置

    linux 环境下,g++和clang都可以作为C++的编译器,我这里选择使用的是clang. 首先是插件选择: (1) C/C++ 微软自带的C/C++插件. (2) C/C++ Clang Com ...

  3. java之java.io.File的相关方法

    java.io.File的使用. IO原理及流的分类. 文件流:FileInputStream.FileOutputStream.FileReader.FileWriter 缓存流:BufferedI ...

  4. 解决Entity 实体类中加了@Id 注解后仍然出现org.hibernate.AnnotationException: No identifier specified for entity 错误

    启动报错如下图所示: 解决方案: 查看网上的资料,大部分都说在实体类中没有添加加主键的注解@Id,这个是必须的.但是我的实体类中明明已经添加了@Id,为什么还会报这个错误呢? 后来检查了很久,发现是我 ...

  5. C# -- RSA加密与解密

    1.  RSA加密与解密  --  使用公钥加密.私钥解密 public class RSATool { public string Encrypt(string strText, string st ...

  6. 使用EasyPOI导入导出图片出现数组越界异常

    在我使用easypoi做导出功能的时候,突然抛了一个数组越界异常,找了很久也没找到,最后猜想有可能是路径出了问题,然后打印了一下图片存放的路径,结果发现在其保存路径上存在“.”,也就是easypoi底 ...

  7. http请求报400错误的原因分析

     在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里: 原因:1)前端提交数据的字段名称或者是字段类型 ...

  8. C lang: Compound literal

    Xx_Introduction C99 stantard. Upate array and struct a compound literal. Literal is date type value. ...

  9. 个人app如何收集用户日志

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/147 个人app如何收集用户日志,相信不少人对这个话题感兴 ...

  10. Caused by: com.rabbitmq.client.ShutdownSignalException: channel error; protocol method: #method<channel.close>(reply-code=406, reply-text=PRECONDITION_FAILED - inequivalent arg 'type' for exchange 'me

    在启动RabbitMQ消费端的时候报错:Caused by: com.rabbitmq.client.ShutdownSignalException: channel error; protocol ...