位置: 编程技术 - 正文

PHP+jQuery翻板抽奖功能实现

编辑:rootadmin

翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟练掌握jQuery和PHP相关知识。

HTML与本站上篇文章不同的是,翻板抽奖不提供开始和结束抽奖按钮,抽奖者自己决定选取其中的某一个方块,来完成抽奖的,所以我们在页面中放置6个方块,并且用1-6来表示不同的方块。

html结构中,我们使用一个无序列表放置6个不同的方块,每个li中的clas属性表示该方块的颜色,列表下面是一个链接a#viewother,用来完成抽奖后,点击它,翻看其他方块背面的中奖信息,默认是隐藏的。接下来还有一个div#data,它是空的,作用是用来临时存储未抽中的其他奖项数据,具体情况看后面的代码。为了让6个方块并排看起来舒服点,您还需要用CSS来美化下,具体可参照demo,本文中不再贴出css代码。PHP我们先完成后台PHP的流程,PHP的主要工作是负责配置奖项及对应的中奖概率,当前端页面点击翻动某个方块时会想后台PHP发送ajax请求,那么后台PHP根据配置的概率,通过概率算法给出中奖结果,同时将未中奖的奖项信息一并以JSON数据格式发送给前端页面。先来看概率计算函数

上述代码是一段经典的概率算法,$proArr是一个预先设置的数组,假设数组为:array(,,,),开始是从1,这个概率范围内筛选第一个数是否在他的出现概率范围之内, 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间,在本例当中就是减去,也就是说第二个数是在1,这个范围内筛选的。这样筛选到最终,总会有一个数满足要求。就相当于去一个箱子里摸东西,第一个不是,第二个不是,第三个还不是,那最后一个一定是。这个算法简单,而且效率非常高,关键是这个算法已在我们以前的项目中有应用,尤其是大数据量的项目中效率非常棒。接下来我们通过PHP配置奖项。

中是一个二维数组,记录了所有本次抽奖的奖项信息,其中id表示中奖等级,prize表示奖品,v表示中奖概率。注意其中的v必须为整数,你可以将对应的奖项的v设置成0,即意味着该奖项抽中的几率是0,数组中v的总和(基数),基数越大越能体现概率的准确性。本例中v的总和为,那么平板电脑对应的中奖概率就是1%,如果v的总和是,那中奖概率就是万分之一了。每次前端页面的请求,PHP循环奖项设置数组,通过概率计算函数get_rand获取抽中的奖项id。将中奖奖品保存在数组$res['yes']中,而剩下的未中奖的信息保存在$res['no']中,最后输出json个数数据给前端页面。

直接输出中奖信息就得了,为何还要把未中奖的信息也要输出给前端页面呢?请看后面的前端代码。jQuery首先为了实现翻板效果,我们需要预先加载翻动插件及jquery,jqueryui相关插件:

接下来,我们通过单击页面中的方块,来完成抽奖行为。

代码中先遍历6个方块,给每个方块初始化不同的背景颜色,单击当前方块后,使用$.getJSON向后台data.php发送ajax请求,请求成功后,调用flip插件实现翻转方块,在获取的中奖信息显示在翻转后的方块上,翻转结束后,标记该中奖方块id,同时冻结方块上的单击事件,即unbind('click'),目的就是让抽奖者只能抽一次,抽完后每个方块不能再翻动了。最后将未抽中的奖项信息通过data()储存在#data中。其实到这一步抽奖工作已经完成,为了能查看其他方块背面究竟隐藏着什么,我们在抽奖后给出一个可以查看其他方块背面的链接。通过点击该链接,其他5个方块转动,将背面奖项信息显示出来。

当单击#viewother时,获取抽奖时保存的未抽中的奖项数据,并将其转化为数组,翻转5个方块,将奖品信息显示在对应的方块中。最终效果图:

我想看完这篇文章后,大家或许就会知道电视节目中的翻板抽奖猫腻了,可能再不会参与了。

总之,希望大家可以从小编整理的这篇文章中有所收获,对大家学习php编程有所帮助。

PHP中如何使用session实现保存用户登录信息 session在php中是一个非常重要的东西,像我们用户登录一般都使用到session这个东西,相对于cookie来说session要安全很多,同时我们购物车经常使用session来

PHP中的switch语句的用法实例详解 switch是一个开关语句,那么很多朋友都只知道简单的switch开关语句的用法了,下面一聚教程小编就为各位详细的介绍一下switch用法例子吧。只所以称为

PHP中使用substr()截取字符串出现中文乱码问题该怎么办 在PHP程序开发中,经常会执行字符串的截取操作,比如输出信息列表时,标题不宜过长,打印文章摘要时,也要执行一系列的字符串截取操作。遇到这

标签: PHP+jQuery翻板抽奖功能实现

本文链接地址:https://www.jiuchutong.com/biancheng/276003.html 转载请保留说明!

上一篇:PHP代码判断设备是手机还是平板电脑(两种方法)(php判断https)

下一篇:PHP中如何使用session实现保存用户登录信息(php中如何使用session)

  • 免税收入进项税额转出比例结转法
  • 保险费车船税会计分录
  • 契税的纳税人是指在我国境内转移房屋土地权的
  • 机动车统一发票税率多少
  • 企业的承兑汇票贴息很高说明什么
  • 文化事业建设费怎么申报
  • 企业运输没有发票
  • 私车公用是否合法
  • 资产负债表季报本月数怎么填
  • 高新企业要求研发投入
  • 没有进项发票出口转内销
  • 培训发生的差旅费怎么记账
  • 工会经费税前扣除凭证
  • 租入固定资产改扩建
  • 索赔费用项目
  • 支付买方佣金
  • 境外签署合同的效力
  • 企业收取的租金会计分录
  • 企业安全生产费用提取标准 最新
  • 销售税金及附加含增值税吗
  • 润滑油消费税征税环节
  • 外贸企业出口退税出口明细申报表
  • 小规模纳税人需要交哪些税
  • 未达起征点的增值税要交所得税吗
  • 商业健康保险个人所得税扣除
  • 所得税汇算清缴退款账务处理
  • 研发支出与开发成本的区别
  • 污水处理费怎么收取的
  • 空调属于什么资产用途
  • 做账的是什么会计
  • 现金采购怎么算
  • 收到的红字发票报税的时候怎么填
  • 计提汽车折旧会计分录
  • win8系统怎么连接无线
  • outlook永久保留邮件
  • 股东认缴和实缴不一致
  • 利润总额为负数净利润怎么算
  • 出口退税申请流程
  • 网页读出来
  • 转让二手设备如何交易
  • wmiprvse.exe是什么程序
  • 自然公园在哪
  • 无形资产使用寿命不确定需要摊销吗
  • 采用汇兑的方式归还前欠货款
  • 小规模纳税人无票收入怎么申报
  • javaweb项目开发流程
  • maven jni
  • 狗能看懂的电视
  • 应交税费-应交增值税
  • 印花税调低
  • 开通对公账号怎么办理
  • 定期定额自行申报表
  • SqlServer 2005/2008数据库被标记为“可疑”的解决办法
  • 营改增后土地出让增值税
  • ETC通行费发票抵扣2021新规定
  • 工资和社保基数的关系
  • 房地产企业内部控制的现状
  • 解释sql server实例
  • windows10的xbox如何录制视频
  • 运行linux
  • rhel7.5重置密码
  • linux lv扩容
  • windows7看视频卡顿如何解决
  • Win10年度升级版Redstone来了:更加个人化的计算体验
  • BootStrap TreeView使用实例详解
  • jquery通过扩展select控件实现支持enter或focus选择的方法
  • shell脚本tr
  • html和js如何应用
  • 引用javascript外部脚本的正确写法
  • 统计重复出现的次数
  • python变量与数据类型
  • jquery.form
  • python 基础教程第三版 怎么样
  • Python实现Sqlite将字段当做索引进行查询的方法
  • js判断怎么写
  • jquery动态添加和删除div
  • 如何查询企业税务评级
  • 武汉税务局发票对奖
  • 深圳增值税勾选平台网址
  • 青岛税务局局长是什么级别?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设