位置: 编程技术 - 正文

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)

  • 本期实际抵减税额合计0.00不等于
  • 在报税显示缺少发票信息
  • 预交增值税附税税率
  • 房地产开发票的时间
  • 怎么快速金蝶数据入库
  • 小规模纳税人的票怎么开
  • 餐饮业加计递减怎么算
  • 辞退员工补偿金账务处理
  • 个体户办理税务登记有什么好处
  • 流动资产周转次数低说明什么
  • 暂估入账估低了怎么办
  • 受托方的计税价格是什么意思
  • 行政单位的会计要素
  • 代收水电费做错了该如何调账?
  • 企事业单位承包承租经营者
  • 用土地出资需要交税吗
  • 个人设备租赁给公司怎么提供发票
  • 营改增土地增值税的计算
  • 开了发票一定要确认收入吗
  • 无形资产的入账价值包括宣传费吗
  • 关联企业间融资方式
  • windows 10如何清除联网记录
  • 其他应收款贷方重分类到哪个科目
  • 月末结转损益类科目为零对吗
  • 受托加工委托方销售产品
  • 计提工资时个税是计提上月的吗
  • 软件测试费计入什么科目
  • PHP:session_set_cookie_params()的用法_Session函数
  • php可以做什么脚本
  • php中几个常用的函数
  • 预付款发票不能回来了怎么处理
  • laravel phpstudy
  • 利息支出属于成本项目吗
  • php获取文本内容
  • 让我用用你的计算机
  • 即征即退先征后返属于政府补助吗
  • 外账和内账哪个比较有发展
  • 小型微利企业的认定标准
  • 增值税专用发票和普通发票的区别
  • 房地产股权转让涉及哪些税费
  • 帝国cms建站教程
  • 累计折旧怎么做账
  • 固定资产投资额是指什么
  • 在建工程领用原材料税费怎么处理
  • 车辆置换差价账务处理
  • 子公司提的盈余公积合并时如何抵消
  • 传媒公司的骗局把戏
  • 财务费用具体包括
  • 伙食费占支出比例
  • 购入的无形资产加计扣除怎么算
  • 建筑企业提供服务的机制保障
  • 冲减应收账款是什么意思
  • 领购发票的方式有哪些
  • sql语句的执行方式
  • MySQL5.6.31 winx64.zip 安装配置教程详解
  • winxp系统桌面图片
  • ubuntu复制文件到当前文件夹
  • xp系统exiting pxe rom
  • linux中sed
  • win8系统崩溃按f8没用
  • centos7修改文件内容
  • windows窗口跑到了侧面
  • scm是啥
  • win7手动更新在哪里设置
  • win10登录界面壁纸
  • 在Linux系统中安装虚拟window
  • linux解密
  • scumpve服务器
  • opengl阴影平移
  • 还原分区和引导分区
  • dos echo命令
  • 读取fasta文件
  • AJAX和jQuery动态加载数据的实现方法
  • 百度贴吧上传图片大小
  • three.js入门教程(合集)
  • using dispose
  • jsoni
  • jquery的核心理念
  • android程序代码
  • 国家税务总局税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设