jQuery+PHP实现动态数字展示特效_jquery-js教程-PHP中文网

jQuery+PHP实现动态数字展示特效_jquery

php中文网

发布： 2016-05-16 16:09:35

原创

1870人浏览过

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()设置代码执行的间隔时间。

立即学习“PHP免费学习笔记（深入）”；

CapWords

AI语言学习工具，通过拍照把身边的物品变成学习素材

180

查看详情

复制代码代码如下:

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+PHP实现动态数字展示特效的代码，希望大家能够喜欢。

大家都在看：

利用Bootstrap模态框获取表单输入值：最佳实践与现代方法 jQuery Mask插件：实现带固定前导零的电话号码输入掩码利用Bootstrap模态框获取表单输入值的现代实践指南前端开发：使用jQuery正确处理重复选中项的计数与显示优化jQuery确认对话框：正确处理重复选择项的计数与显示