位置: 编程技术 - 正文

jQuery+PHP实现微信转盘抽奖功能的方法(php jquery教程)

编辑:rootadmin

推荐整理分享jQuery+PHP实现微信转盘抽奖功能的方法(php jquery教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery weui demo,php javascript,php javascript,jquery weui demo,php javascript,php使用jquery,php100 jquery教程,php100 jquery教程,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法。分享给大家供大家参考,具体如下:

本文结合实例将使用jQuery和PHP来实现转盘抽奖程序。

准备工作

首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片。

接着制作html页面,实例中我们在body中加入如下代码:

我们用#disk来放置圆盘背景图片,在css中控制,用#start来放置指针图片start.png。

然后我们使用CSS来控制指针和圆盘的位置,代码如下:

jQuery

要想让指针转动起来,如果不借助flash的话,我们可以使用html5的canvas实现图片的旋转,但是需要考虑浏览器兼容性,而一款jQuery插件完全可以实现图片(任意html元素)旋转并兼容各大浏览器,它就是jQueryRotate.js。

使用jQueryRotate.js可以将图片旋转任意角度,可以绑定鼠标事件,可以设置旋转过程动画效果以及callback回调函数。

jQuery+PHP实现微信转盘抽奖功能的方法(php jquery教程)

使用方法当然是先在head中载入jquery库文件以及jQueryRotate.js,然后我们使用以下代码就可以实现指针转动了。

上面的代码实现了:当单击指针“开始抽奖”按钮,指针开始转动,转动角度为+a,即圈后再转动随机产生的a角度,当转动角度到达+a度时停止转动。

PHP

首先,我们根据抽奖圆盘上的奖项设置对应角度和中奖几率,我们在data.php中构建一个多维数组:

数组$prize_arr,id用来标识不同的奖项,min表示圆盘中各奖项区间对应的最小角度,max表示最大角度,如一等奖对应的最小角度:0,最大角度,这里我们设置max值为1、max值为,是为了避免抽奖后指针指向两个相邻奖项的中线。由于圆盘中设置了多个七等奖,所以我们在数组中设置每个七等奖对应的角度范围。prize表示奖项内容,v表示中奖几率,我们会发现,数组中七个奖项的v的总和为,如果v的值为1,则代表中奖几率为1%,依此类推。

关于中奖概率算法

函数getRand()会根据数组中设置的几率计算出符合条件的id,我们可以接着调用getRand()。

代码中,我们调用getRand(),获得通过概率运算后得到的奖项,然后根据奖项中配置的角度范围,在最小角度和最大角度间生成一个角度值,并构建数组,包含角度angle和奖项prize,最终以json格式输出。

jQuery

在上文的基础上,我们对前端jQuery代码进行改造,当点击“开始抽奖”按钮后,向后台data.php发送一个ajax请求,如果请求成功并返回奖项信息,则转动指针,将指针最终指向位置转动到data.php返回的角度值。

我们构建自定义函数lottery(),在lottery()我们向data.php发送一个POST请求,如果成功返回中奖信息后,调用rotate插件开始转动,转动角度由后台返回的角度决定,这里我们用+a表示转动的角度,即指针转动6圈+a度后停止,然后我们在单击“开始抽奖”按钮时调用lottery(),于是转盘抽奖就完成。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQueryUI中的datepicker使用方法详解 jQueryUI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关

jquery按回车键实现表单提交的简单实例 本文章在给大家介绍在用户输入完信息之后直接按回车进行表单提交的jquery实现方法,有需要了解的朋友可进来参考以。键盘事件有3:jquery键盘事件参

jquery的ajax提交form表单的两种方法小结(推荐) jquery的ajax提交form表单的两种方法小结(推荐)方法一:functionAddHandlingFeeToRefund(){varAjaxURL="../OrderManagement/AjaxModifyOrderService.aspx";alert($('#formAddHandlingFee').serial

标签: php jquery教程

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

上一篇:jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)(jquery访问本地html)

下一篇:jQueryUI中的datepicker使用方法详解(jquery.data)

  • 小规模企业需要交哪些税
  • 缴纳购销合同印花税怎么算
  • 征税和补贴对市场结果的影响
  • 水费3个点税
  • 企业除了增值税还有什么税
  • 税务系统 受理
  • 处置无形资产取得的收入计入
  • 其他应收款利息收入税务规定
  • 行政事业单位净资产关系图
  • 商贸企业收到的检测费可以抵扣进项税吗
  • 销售返利计入什么科目
  • 工程投标保证金最新规定
  • 产品质量问题怎么处罚
  • 新企业会计准则什么时候实施的
  • 西安的税务局
  • 新会计准则税金及附加
  • 印花税申报完成后如何缴款
  • 实行初税亩
  • 销售佣金的税率怎么算
  • 利润总额要减去营业外支出吗
  • 投资收益税前扣除标准
  • 未按规定安装使用税控装置
  • 不同方式的融资租赁业务如何贴花?
  • 挂错科目怎么调整
  • svhost.exe - svhost是什么进程 有什么作用
  • php常用的技术栈
  • linux中的
  • php基础入门
  • 非正常损失运输费进项税额如何转出
  • 金融资产终止确认是什么意思
  • 如何利用http协议发布博客园博文评论
  • 科罗拉多斯普林斯海拔
  • 企业受赠业务的法律规定
  • codelite怎么进行编译
  • 国税代开普票能作废吗
  • 个税申报中是否婚前各自首套贷款
  • 税务机关代小规模纳税人开发票
  • 3d点云处理算法
  • springboot -d
  • xa 事务
  • 一般情况下公司为什么会吊销
  • 购物赠品的相关法律
  • 期权增发是什么行业
  • 凭证摘要写错了已经结账
  • 税收筹划类型有哪几种
  • 物业合并利润表怎么填
  • 维修费成本怎么结转
  • 长期挂账其他应付款处理
  • 你知道实施“营改增”对企业有哪些积极的效应么?
  • 总公司可以给子公司开票吗
  • 固定资产是每月折旧吗
  • 应收账款应付账款可以抵消吗
  • 哪些商业保险可以抵扣个税
  • 赠品不开票怎么办
  • 期间费用包括哪三种
  • solaris newfs
  • win2003好用吗
  • 如何配置samba配置文件
  • 如何给电脑重装系统win7系统
  • 进程是什么 进程类型
  • linux开启启动程序
  • vrvarp.exe是什么
  • win7无法启动print spooler服务,错误5
  • windows10自带磁盘修复工具
  • 苹果电脑支持的u盘格式
  • mac上安装
  • 2007皖价服
  • win8操作中心
  • debian怎么用
  • win7强制关机后内存不足
  • css display none之后怎么显示回来
  • js实现组件功能
  • 排序方法python
  • python微信公众号开发教程
  • javascript $符号
  • 湖南税务发票查验平台官网
  • 公务员副处级工资待遇
  • 电子税务局申请开票额度增加
  • 从价计征和从租计征的区别,有什么优缺点
  • 简述纳税人与负税的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设