PHP中如何使用jQuery实现动态数字展示效果

本篇内容主要讲解“PHP中如何使用jQuery实现动态数字展示效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“PHP中如何使用jQuery实现动态数字展示效果”吧!

我们提供的服务有:网站制作、网站建设、微信公众号开发、网站优化、网站认证、通州ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的通州网站制作公司

HTML

在HTML页面中只需定义以下结构:

当前在线:

jQuery

首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magic_number()自定义函数将代码整合如下:

function magic_number(value) { var num = $("#number");    num.animate({count: value}, {        duration: 500,        step: function() {            num.text(String(parseInt(this.count))); } }); };

然后update()函数使用了jQuery的$.getJSON()向后台number.php发送了一个ajax请求,在得到PHP相应后,调用magic_number()展示最新的数字。为了能看到更好的效果,我们使用setInterval()设置代码执行的间隔时间。

function update() {    $.getJSON("number.php?jsonp=?", function(data) { magic_number(data.n);    }); }; setInterval(update, 5000); //5秒钟执行一次 update();

PHP

实际项目中,我们会使用PHP获取数据库中的最新数据,然后通过PHP返回给前端。本例为了更好的演示,使用随机数字,最后以json格式返回给前端js,number.php代码如下:

$total_data = array( 'n' => rand(0,999) ); echo $_GET['jsonp'].'('. json_encode($total_data) . ')';  

到此,相信大家对“PHP中如何使用jQuery实现动态数字展示效果”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


本文名称:PHP中如何使用jQuery实现动态数字展示效果
网站链接:http://pwwzsj.com/article/ihcjij.html