基于jQuery的动态数字显示效果的实现

基于jQuery的动态数字显示效果的实现
在某些应用中,需要动态地显示数据,如当前在线人数,目前交易总金额、当前汇率等,和前面的页面需要刷新和实时获取最新数据。本文将介绍一个实例介绍了利用jQuery动态数字显示的影响。
查看演示下载源码

HTML代码

这个示例假设我们需要动态地在页面上显示(不刷新整个页面,只需刷新本地的动态编号)。当前在线用户的数量经常应用在一些统计平台上:

当前在线:

jQuery代码:

首先,我们需要定义一个动画程序,使用jQuery的动画()函数将进程从一个数字到另一个,和下面的magic_number()自定义功能集成的代码如下。

功能magic_number(值){
Num = $(var#号);
num.animate({计数:值},{
持续时间:500,
步骤:函数(){
num.text(字符串(parseInt(这个数)));
}
});
};
然后更新()函数使用jQuery的getJSON()发送一个Ajax请求的背景number.php。得到相应的PHP后,它要求magic_number()显示最新的数。

为了看到更好的结果,我们使用setInterval()设置的代码执行的时间间隔。

函数更新(){
美元。getJSON(号。phpjsonp =
magic_number(数据。n);
});
};
setInterval(更新5000); / / 5秒的执行
更新();
PHP
在实际工程中,我们将使用PHP数据库中获取最新的数据,然后返回给前端通过PHP。为了更好的演示,本例中使用的随机数,最后返回JSON格式的前端JS,和number.php代码如下:

total_data美元=阵列(
兰德(0999)
);
echo $ _get { 'jsonp}。'('。json_encode($ total_data)')。;

tag:动态数字显示效果电脑软件jquery

相关内容