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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
Jan 15 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
vue实现购物车结算功能
Jun 18 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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
一个ftp类(ini.php)
2006/10/09 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
AngularJS语法详解(续)
2015/01/23 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
React Router基础使用
2017/01/17 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
详解vue-cli3使用
2018/08/14 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
使用python遍历指定城市的一周气温
2017/03/31 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
pybind11在Windows下的使用教程
2019/07/04 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
python中return如何写
2020/06/18 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
Wallis官网:英国女装零售商
2020/01/21 全球购物
AOP的定义以及作用
2013/09/08 面试题
个人作风剖析材料
2014/02/02 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
横空出世观后感
2015/06/09 职场文书
实习报告范文
2019/07/30 职场文书
Python实现照片卡通化
2021/12/06 Python
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL