基于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）'）。；