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

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

赞 (0)

相关推荐

  • Jquery数字上下滚动动态切换插件

    Jq打造的数字滚动插件,数字变化时,动态滚动切换,效果非常好. 我们先来看示例: CSS .textC { position:absolute; width:500px; overflow:hidden; margin-top: 100px; line-height:30px; margin-left: 300px; height:30px; } .textC span { color: #13BEEC; font-size: 28px; font-weight: bold; font-fami

  • 基于jQuery实现动态数字展示效果

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery实现动态数字展示效果. 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"> &

  • 利用原生JS与jQuery实现数字线性变化的动画

    前言 大家应该都有所体会,在一些数据展示的专题页里,有时候希望数字能动态从某一个数变化到另一个数,以此来吸引用户眼球,突出数据.于是有了下文. 在这里,我用了两种方式:一种是原生的JavaScript,另一种是jQuery插件. 数字线性变化的原理很简单,就是让数字增量变化,并循环动画. 原生JS版 首先获取DOM元素.为了兼容到IE6,兼容性方法如下: var domUtil = { // 获取DOM元素 get: function(query) { var _this = this; if(

  • jQuery实现立体式数字动态增加（animate方法）

    jQuery实现立体式数字动态增加（animate方法）

    1.HTML结构 <div class="integral">已有<span class="ii"></span>积分</div> 2.js <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src

  • js随机生成字母数字组合的字符串 随机动画数字

    js随机生成字母数字组合的字符串 随机动画数字

    js随机动画生成一组随机数字 在线预览 点击下载 效果描述: 附件中只有一个index.html文件有效 其中包含css以及html两部分内容 纯js生成的几个随机数字 每次都不重复,点击按钮后再次切换 使用方法: 1.将css样式引入到你的网页中 2.将body中的代码部分拷贝到你需要的地方即可 JS生成随机的由字母数字组合的字符串 前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法 Math.random().toStr

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

    HTML 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: 复制代码 代码如下: <div class="count">当前在线:<span id="number"></span></div> jQuery 首先我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,以下magi

  • jquery实现的动态回到顶部特效代码

    jquery实现的动态回到顶部特效代码

    本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

  • 使用JQuery FancyBox插件实现图片展示特效

    使用JQuery FancyBox插件实现图片展示特效

    FancyBox是一个用于显示图像,HTML内容和多媒体的lightbox工具. jquery插件之fancybox弹出框特效,与广为人之的lightbox插件比较类拟,可以展示单张图片,也可展示一组图片,它还可以展示自定义的内容与ajax载入外部文件的内容等,功能也是很方便与实用的. Demo effect(image gallery): Sample code: <link href="~/Content/jquery.fancybox.css" rel="styl

  • jQuery+PHP+Ajax实现动态数字统计展示功能

    jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div class="count">当前在线:<span id="number"></span></div> 然后我们要定义一个动画过程,使用jQuery的animate()函数实现从一个数字到另一个数字的变换过程,magic_numb

  • 高效的jquery数字滚动特效

    高效的jquery数字滚动特效

    本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点:<div class="numberRun"></div> <br><br> 只有分隔符:<div class="numberRun2"></div> <br><br> 只有小数点:<div class="numberRun3"&g

  • jQuery实现的产品自动360度旋转展示特效源码分享

    jQuery实现的产品自动360度旋转展示特效源码分享

    这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节. jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 运行效果图:---------------------------------效果查看 源码下载----------------------------------- 为大家分享的

  • jquery+json实现动态商品内容展示的方法

    本文实例讲述了jquery+json实现动态商品内容展示的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xm

  • javascript实现数字时钟特效

    javascript实现数字时钟特效

    本文实例为大家分享了javascript实现数字时钟特效的具体代码,供大家参考,具体内容如下 先看效果,动态数字时钟 用到了jQuery,但是只是用来获取元素,只有一点点 面向对象开发 看代码 HTML,自己引入jQuery和js,jQuery在前 <body> <div class="wrapper"> <div class="column"> <!-- 此div表示时的十位,只有0,1,2三个 --> <di

  • JavaScript实现的可变动态数字键盘控件方式实例代码

    JavaScript实现的可变动态数字键盘控件方式实例代码

    整理文档,搜刮出一个JavaScript实现的可变动态数字键盘控件方式实例代码,稍微整理精简一下做下分享. @sunRainAmazing JavaScript编写和实现的可变动态键盘密码输入控件,可以动态的生产数字键盘并显示,并且可以实现每次点击后密码键盘重新加载,可以手动刷新功能. 第一种方式,点击查看: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

随机推荐