PHP实现动态数字展示特效,基于jQuery实现动态数
分类:pc28.am

大家在部分选用中供给动态显示数据,譬喻当前在眼线数,当前贸易总额,当前货币的比价等等,前端页面供给实时刷新获取最新数据。本文将结合实例给我们介绍使用jQuery达成动态数显著效果果。

HTML

jQuery PHP达成动态数显特效,jqueryphp

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 PHP完成动态数显特效的代码,希望我们能够向往。

HTML 本例假使要在页面上动态展示(没有要求刷新整个页面,只是有个别刷新动态数字)当前在线顾客数,...

HTML代码

本例假若要在页面上动态浮现当前在线客商数,见惯司空在有个别计算平台上接受。在HTML页面中只需定义以下结构:

本例即使要在页面上动态展示当前在线用户数,朝齑暮盐在有些总结平台上利用。在HTML页面中只需定义以下构造:

复制代码 代码如下:

当前在线:

一时一刻在线:

jQuery代码:

jQuery

率先我们要定义三个卡通进度,使用jQuery的animate(卡塔尔国函数达成从一个数字到另叁个数字的退换进程,以下magic_number(卡塔尔国自定义函数将代码整合如下:

先是大家要定义三个卡通进程,使用jQuery的animate(卡塔尔函数达成从贰个数字到另叁个数字的调换进度,以下magic_number(卡塔尔(قطر‎自定义函数将代码整合如下:

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

复制代码 代码如下:function magic_number { var num = $; num.animate({count: value}, { duration: 500, step: function() { num.text(String); } }); };

下一场update(卡塔尔(英语:State of Qatar)函数使用了jQuery的$.getJSON(卡塔尔(英语:State of Qatar)向后台number.php发送了八个ajax央浼,在得到PHP相应后,调用magic_number(卡塔尔(قطر‎呈现最新的数字。

然后update(卡塔尔(英语:State of Qatar)函数使用了jQuery的$.getJSON(卡塔尔国向后台number.php发送了三个ajax央求,在获取PHP相应后,调用magic_number(卡塔尔(英语:State of Qatar)浮现最新的数字。为了能见到越来越好的功效,我们采纳setInterval(卡塔尔(英语:State of Qatar)设置代码实践的间距时间。

为了能收看越来越好的效果,大家应用setInterval(卡塔尔(قطر‎设置代码执行的间距时间。

复制代码 代码如下:function update(卡塔尔 { $.getJSON("number.php?jsonp=?", function { magic_number; }; setInterval; //5分钟实行一次 update(卡塔尔国;

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

PHP

实质上项目中,大家会动用PHP获取数据库中的最新数据,然后经过PHP重临给前端。本例为了更加好的示范,使用随机数字,最终以json格式再次来到给前端js,number.php代码如下:

实质上项目中,大家会利用PHP获取数据库中的最新数据,然后经过PHP重回给前端。本例为了更加好的示范,使用随机数字,最终以json格式重临给前端js,number.php代码如下:

$total_data = array; echo $_GET['jsonp'].'('. json_encode'; 

复制代码 代码如下:$total_data = array; echo $_GET['jsonp'].'('. json_encode';

以上正是本文给我们享受的jQuery PHP达成动态数显特效的代码,希望大家能够赏识。

本文由pc28.am发布于pc28.am,转载请注明出处:PHP实现动态数字展示特效,基于jQuery实现动态数

上一篇:JavaScript中的call方法和apply方法使用对比_基础知识 下一篇:没有了
猜你喜欢
热门排行
精彩图文