php发展

注册

 

发新话题 回复该主题

案例,基于JQueryPHP编写砸金蛋 [复制链接]

1#

1、HTML

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

2、CSS

先看下页面的效果:

效果图

3、jQuery

接下来,我们用jQuery代码来实现砸金蛋、碎蛋、展示中奖结果的整个过程(必须先载入jQuery库文件)。

首先,实现鼠标放在哪个金蛋上锤子就会跟着到那个金蛋的上方,可以使用position()来定位。

然后,点击金蛋,在click中先把金蛋中的编号数字隐藏,然后调用自定义函数eggClick()。

最后,在自定义函数eggClick()中,我们使用jQuery的$.getJSON方法向后台data.php发送一个ajax请求,后台php程序会处理奖项分配并把中奖结果返回。自定义函数eggClick()的代码:

4、PHP

data.php处理前端发送的ajax请求,使用概率算法,根据设置好的中奖概率,将中奖结果以json的格式输出。其代码如下:

PHP如何使用邮箱找回密码?

用PHP实现图形图像的处理

分享 转发
TOP
发新话题 回复该主题