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实现图形图像的处理