php把数字倒着展示,jQuery+PHP实现动态数字展示特效

HTML

本例假设要在页面上动态展示(无需刷新整个页面，只是局部刷新动态数字)当前在线用户数，常见在一些统计平台上应用。在HTML页面中只需定义以下结构：

代码如下:

当前在线：

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

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

php把数字倒着展示,jQuery+PHP实现动态数字展示特效相关推荐

ajax php计数,jQuery+PHP+Ajax动态数字统计展示实例
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: 当前在线: - ...
jQuery+PHP+Ajax动态数字统计展示实例
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...
ajax php 动态,jQuery+PHP+Ajax实现动态数字统计展示功能
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: 当前在线: 然后 ...
jQuery+PHP动态数字展示效果
我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果. 查看演示下 ...
jQuery 判断是否为数字的方法及转换数字函数
1.isNaN() <script language="javascript"> var t=$("#id").val();//这个就是我们要判断的 ...
第二百一十七节，jQuery EasyUI，NumberSpinner(数字微调)组件
jQuery EasyUI,NumberSpinner(数字微调)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 NumberSpinner ...
键盘录入一个正整数，把它的各个位上的数字倒着排列形成一个新的整数并输出。例如：12345 数出54321 78760 输出6787（0省去）
package com.coffn.demos; /*** 4.键盘录入一个正整数,把它的各个位上的数字倒着排列形成一个新的整数并输出.例如:12345 数出54321 78760 输出6787(0省 ...
jQuery实现鼠标划过展示大图的方法
这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现鼠标划过展示大图 ...
基于at89c51单片机的led数字倒计时器设计c语言,课程设计（论文）-基于AT89C51单片机的LED数字倒计时器设计.docx...
单片机原理及其应用课程设计课题: 基于AT89C51单片机的LED数字倒计时器设计专业: 电工程及其自动化班级: 2013 级 4班学号: 姓名: 设计日期: 2015年6月6日--201 ...

php把数字倒着展示,jQuery+PHP实现动态数字展示特效

php把数字倒着展示,jQuery+PHP实现动态数字展示特效相关推荐

最新文章

热门文章