位置: 编程技术 - 正文

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)

  • 动产租赁税率是多少2023
  • 增值税率和征收率
  • 税务师考试需要记忆的税率
  • 企业所得税要交多少税
  • 旅游大巴怎么计费的
  • 个人所得税修改赡养信息
  • 工资中事假扣款执行依据
  • 发票验证码和校验码是一样的吗
  • 有限合伙企业合伙人责任
  • 营改增前甲供材料如何纳税
  • 三证合一后银行开户许可证还有吗
  • 商场促销的税务处理怎么做?
  • 复利现值系数完整版
  • 转给个人账户的钱可以追回来了吗?
  • 企业取暖费怎么做会计分录
  • 白条确认收款后还能分期吗
  • 核定征收的企业需要成本发票吗
  • 事业单位需要写自传吗
  • 增值税发票是需要先对公转账吗
  • 个体户开发票要交税吗
  • 房租的应收必须交吗
  • 分公司非独立核算是什么意思
  • 免税增值税发票怎么做账
  • 小规模付增值税怎么做账
  • 销售折让发票如何处理?
  • 其它权益工具投资处置时其他综合收益转那
  • 阿拉斯加州zip
  • 第三方检测公司有前途吗
  • 两借三贷是复合分录吗
  • php二维数组的遍历
  • php_fileinfo作用
  • 调整固定资产折旧年限,折旧额的变化
  • PHP curl 或 file_get_contents 获取需要授权页面的方法
  • framework core
  • 金融商品转让业务包括
  • vue中elementui怎么用
  • thinkphp框架怎么用
  • 表单建模
  • ElementUI中<el-form>标签中 ref、:model、:rules 的作用
  • 运动目标检测算法
  • 一般纳税人筹建期不用交税吗
  • 政府奖励怎么做会计分录
  • 个人所得税既有工资薪金又有劳务报酬房屋租金
  • 在线客服系统登录
  • 工程项目开票金额和合同金额统计表
  • 企业破产员工补偿标准是按上年平均工资
  • 清包工可以有一部分小料吗
  • 金蝶凭证汇总表怎么打印
  • 土地使用权转让法律规定
  • 主营业务成本计入成本类账户吗
  • 债权投资的交易费用计入成本还是利息调整
  • 发票勾选认证的时间限制是多久
  • 专票三流合一指哪三流
  • 销售成本包括哪些内容
  • 金税三期网络设置
  • 解析关于sql语句的实现
  • 在linux系统中安装软件
  • mysql数据库windows
  • 阿里云linux 服务器 字符集
  • linux中chkconfig命令的作用
  • vmware虚拟机不能用桥接模式
  • agentctl.dll
  • win10运行win8程序
  • win10怎么检查
  • xp显示文件后缀怎么设置
  • proflwiz.exe - proflwiz是什么进程 有什么用
  • win7服务在哪里打开
  • rrpcsb.exe - rrpcsb是什么进程 有什么用
  • win10升级版本后还要激活吗
  • win8更新80072efe
  • 分享五个有用的东西
  • Unity3D游戏开发(第2版)
  • Emeditor与dos(cmd)经典使用技巧之批量生成网页
  • 如何把多个文本文档合并成一个且分行不重叠
  • three.js typescript
  • jquery popupDialog 使用 加载jsp页面的方法
  • node.js ts
  • javascript简明教程
  • jquery库有哪些
  • 税控盘如何查询季度统计
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设