位置: 编程技术 - 正文

基于JQuery+PHP编写砸金蛋中奖程序(jquery编程)

编辑:rootadmin

推荐整理分享基于JQuery+PHP编写砸金蛋中奖程序(jquery编程),希望有所帮助,仅作参考,欢迎阅读内容。

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

首先给大家展示效果图:

查看演示 下载源码

准备工作

我们需要准备道具(素材),即相关图片,包括金蛋图片、蛋砸碎后的图片、砸碎后的碎花图片、以及锤子图片。

HTML

我们页面上要展现的是一个砸金蛋的台子,台上放了编号为1,2,3的三个金蛋,以及一把锤子。我们构建以下html代码:

上述代码中,.hammer放置锤子,.resultTip用于砸蛋后显示的结果,即有没有中奖,三个li分别放置3个金蛋,我们用CSS来装饰下效果。

CSS

基于JQuery+PHP编写砸金蛋中奖程序(jquery编程)

按照上面的代码我们可以在页面中看到一个完整的砸金蛋场景,注意我们使用了png图片,如果你的客户仍在使用ie6的话,你可能需要对png图片的透明做处理,本文不做处理。

jQuery

接下来,我们要用jQuery代码来实现砸金蛋、碎蛋、展示中奖结果的整个过程。当然,老规矩,对于才用jQuery实现的实例程序,你必须先载入jQuery库文件。

首先,当鼠标滑向金蛋时,用于砸金蛋的锤子会仅靠金蛋右上方,可以使用position()来定位。

然后,点击金蛋,即挥动锤子砸向金蛋的过程。我们在click中先把金蛋中的编号数字隐藏,然后调用自定义函数eggClick()。

最后,在自定义函数eggClick()中,我们使用jQuery的$.getJSON方法向后台data.php发送一个ajax请求,后台php程序会处理奖项分配并把中奖结果返回。我们使用animate()来实现砸锤子的动画,通过改变锤子的top和left位子来实现简单的动画效果,锤子砸下去后,金蛋样式变为.curr,同时金花四溅,然后中奖结果.resultTip展示,有没有中奖要看你的运气和后台奖项设置的中奖几率了。来看砸金蛋函数eggClick()的代码:

为了将砸金蛋程序更真实的结合到你的网站中,你可以在砸蛋前验证会员身份,限制砸蛋次数、砸蛋中奖后留下联系方式等等措施,具体看网站需求了。

PHP

data.php处理前端发送的ajax请求,我们才用概率算法,根据设置好的中奖概率,将中奖结果以json的格式输出。关于概率计算的例子可以参照:PHP+jQuery实现翻板抽奖

通过设置概率,我们可以看出,砸中平板电脑的几率占3%,砸不中的几率占%,点击演示demo来试试你的运气吧。

ThinkPHP函数详解之M方法和R方法 首先给大家介绍ThinkPHP函数详解:M方法M方法用于实例化一个基础模型类,和D方法的区别在于:1、不需要自定义模型类,减少IO加载,性能较好;2、实

PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结 1、推荐的一种方法:php判断搜索引擎蜘蛛爬虫还是人为访问代码,摘自Discuzx3.2phpfunctioncheckrobot($useragent=''){static$kw_spiders=array('bot','crawl','spider','slurp','sohu-

php生成静态html页面的方法(2种方法) 因为每次用户点击动态链接的时候都会对服务器发送数据查询的要求,对于一个访问量可能达百万千万级别的网站来说这无疑是服务器一个大大的负担

标签: jquery编程

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

上一篇:ubuntu下配置nginx+php+mysql详解(ubuntu设置nginx开机启动)

下一篇:ThinkPHP函数详解之M方法和R方法(thinkphp i方法)

  • 留抵税额退税怎么做账
  • 补缴以前年度附加税如何入账
  • 计提印花税会计
  • 库存商品盘点的作用表现为
  • 普通发票不能抵扣进项税额怎么做账
  • 销售滞后是什么行为
  • 计算并分摊本月利润
  • 土地违约金怎么写合同
  • 快递行业的收入与成本
  • 购买原材料的费用
  • 采购退回的分录
  • 以物易物方式销售货物例题
  • 预收账款开票可以抵扣吗
  • 企业员工已公司名义参加境外比赛获得奖金如何缴税?
  • 少数股东损益借方增加还是贷方增加
  • 残疾人就业保障金
  • 清算汇缴报表填写模板
  • 出口货物 关税
  • 涂料生产企业消毒方案
  • 积分兑换现金的软件
  • 出售固定资产账务如何处理
  • 餐饮定额发票怎么征税
  • 企业筹建期发生的广告宣传费怎么抵减所得税
  • 年金是根据什么计算的
  • 国家基建项目规划
  • 计提跌价准备会影响利润吗
  • 社保买房公积金
  • Linux系统中修改网络配置文件
  • Mysql的GROUP_CONCAT()函数使用方法
  • 如何才能显示效果更好
  • mac系统存储好大
  • os x 10.10 yosemite自动纠正怎么关?os x yosemite自动纠正功能关闭教程
  • php read
  • 企业亏损注销税务会不会来查账
  • mksysb命令
  • 请简述你对php的理解并描述php的工作流程
  • 多个php文件整合到一起
  • php session用法
  • datetime2(7)
  • 库存现金每月终了由谁清点
  • 其他非流动资产是会计科目吗
  • java泛型类和泛型方法
  • 交通运输发票票样
  • 融资租赁的残值归出租人所有,为啥要减去租金限值
  • 残疾人保证金的滞纳金怎么计算
  • 应收账款扣款会计处理
  • 可转债中签卖出流程
  • 公司借个人款利息产生个人所得税公司可以承担吗
  • 结转以后年度抵免的境外所得税怎么进行会计处理
  • 应付票据转应付账款会计分录
  • 净值怎么算?
  • 社平工资调整补差能补多少
  • 非税收入如何退款
  • 招待费用的进项发票可以抵扣吗
  • 应收账款和应付账款属于什么科目
  • 公司建立初期做账
  • session入库有什么好处
  • 一条的句子怎么写
  • mysql5.7主从配置
  • 使用mysql进行模糊查询
  • win7旗舰版系统还原无法启动
  • centos怎么连接远程服务器
  • windowsxp如何清理磁盘
  • Linux系统中文件的文件名存储在文件所在的目录
  • win8如何打开设置
  • win10怎么取消禁用
  • 你不知道的关于现代主义的故事
  • win10键盘大小写不能切换了
  • javascript中的继承
  • 2014 ChinaJoy落下帷幕 十大年度热门事件盘点
  • 批处理文件的拷贝怎么写
  • linux随机数生成1到100
  • window.open()参数传递及获取
  • 做网页的流程与步骤
  • 房产交契税网上可以交吗
  • 新加坡政治体制的介绍
  • 增值税进项发票如何做账
  • 开电影院有哪些要求
  • 乡镇经管站是如何工作
  • 卡车生产企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设