基于jQuery实现动态数字展示效果
更新时间：2015年08月12日 15:57:50 投稿：mrr
Jq数据列表动态效果，动态更新，支持Ajax动态刷新。下面小编给大家介绍下基于jQuery实现动态数字展示效果，需要的朋友可以参考下
我们在一些应用中需要动态展示数据，比如当前在线人数，当前交易总额，当前汇率等等，前端页面需要实时刷新获取最新数据。本文将结合实例给大家介绍使用jQuery实现动态数字展示效果。
HTML代码
本例假设要在页面上动态展示（无需刷新整个页面，只是局部刷新动态数字）当前在线用户数，常见在一些统计平台上应用。在HTML页面中只需定义以下结构：
<div class="count">当前在线：<span id="number"> </span> </div>
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) . ')';
相关文章
用jquery为ul下的li依次设置样式的代码，主要是利用了first,next方法。2011-03-03
前一篇我们介绍了一种防SQL注入的终极方法，也就是最原始、最简单、最有效也是最通用的方法，就是数据类型的检查加单引号的处理，具体的内容前面一篇已经介绍过了，这里我就不重复了2008-12-12
这篇文章主要内容是jQuery无刷新切换主题皮肤实例讲解，本文应用cookie记录用户所选择设置的主题皮肤样式，需要了解的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了jQuery验证插件validate使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了EasyUI加载完Html内容样式渲染完成后显示的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery的$.extend 浅拷贝与深拷贝的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了Jquery ajax书写方法代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了jQuery层叠选择器用法,结合实例形式分析了jQuery层叠选择器功能、用法及相关操作注意事项,需要的朋友可以参考下2019-06-06
最近，项目使用了JqGrid，但需要打印Grid里面的数据。使用的是CSS属性中的Media媒体类型来控制打印样式。2011-05-05
最新评论