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


Posted in Javascript onMarch 14, 2015

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

Javascript 相关文章推荐
jquery.tmpl JQuery模板插件
Oct 10 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 #Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 #Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 #Javascript
jQuery插件实现大图全屏图片相册
Mar 14 #Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 #Javascript
jQuery实现菜单式图片滑动切换
Mar 14 #Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 #Javascript
You might like
php反弹shell实现代码
2009/04/22 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php中socket的用法详解
2014/10/24 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
JsChart组件使用详解
2018/03/04 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
react 生命周期实例分析
2020/05/18 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
python3.5仿微软计算器程序
2020/03/30 Python
常见python正则用法的简单实例
2016/06/21 Python
python实现各种插值法(数值分析)
2019/07/30 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
Ajax主要包含了哪些技术
2014/06/12 面试题
慈善晚会策划方案
2014/05/14 职场文书
企业活动策划方案
2014/06/02 职场文书
采购部长岗位职责
2014/06/13 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
交通安全教育主题班会
2015/08/12 职场文书
小学运动会入场口号
2015/12/24 职场文书