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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
jquery自定义表格样式
Nov 23 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
幼儿园教师教学反思
2014/02/06 职场文书
会计的岗位职责
2014/03/15 职场文书
篮球赛新闻稿
2015/07/17 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
vue修饰符.capture和.self的区别
2022/04/22 Vue.js