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中文网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/287371.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android之实现多张图片点击预览(支持放缩)和滑动

1 需求 多张图片通过recycleView展示,然后点击具体一张图片支持预览(支持放缩)和滑动 2 解决办法 BaseRecyclerViewAdapterHelper com.github.chrisbanes.photoview.PhotoView ViewPage2 组合起来真香 https://github.com/CymChad/BaseRecyclerViewAdapt…

【Envi风暴】Envi5.4经典安装图文教程

ENVI(The Environment for Visualizing Images)是一个完整的遥感图像处理平台,应用汇集中的软件处理技术覆盖了图像数据的输入/输出、图像定标、图像增强、纠正、正射校正、镶嵌、数据融合以及各种变换、信息提取、图像分类、基于知识的决策树分类、与GIS的整合、DEM及地形信…

错误: nknown column 'xxxx' in 'where clause'

nknown column sdsds in where clause 运行环境:jdk1.7.0_17tomcat 7 spring:3.2.0 mybatis:3.2.7 eclipse 错误:nknown column sdsds in where clause 错误原因:数据库查询无用,可能很多写sql语句都会遇到…

c/c++处理参数

直接上代码&#xff1a;涉及函数getopt()&#xff0c;getopt_long() 1 #include <unistd.h>2 #include <stdlib.h>3 #include <stdio.h>4 #include <getopt.h>5 6 /*7 int main(int argc, char *argv[])8 {9 int opt; 10 char * optstring &q…

查缺补漏系统学习 EF Core 6 - 批量操作

推荐关注「码侠江湖」加星标&#xff0c;时刻不忘江湖事这是 EF Core 系列的第七篇文章&#xff0c;上一篇文章讲述了 EF Core 中的实体数据修改。这篇文章讲一讲 EF Core 如何进行批量操作。在众多的 ORM 框架中&#xff0c;EF Core 的功能并不是最强大的那个&#xff0c;性能…

半小时一篇文过完C语言基础知识点

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本文定位读者为小白读者&#xff0c;将使用最快的方法过完C语言基础知识…

php变量的判空和类型判断

&#xff08;1&#xff09;var_dump(); 判断一个变量是否已经声明并且赋值&#xff0c;并且打印类型和值 <?php $a; var_dump($a);//输出null<?php var_dump($a);//输出null<?php$a 10; var_dump($a);//输出 int 10&#xff08;2&#xff09;isset() 判断一个变量…

【Envi风暴】Envi插件大全:多波段拆分工具的巧妙使用

很多场合下需要做波段合成,比如波段432合成赋予红绿蓝,构造标准假彩色等等。合成后的文件通常包含多个单波段文件,在Envi中使用layer stacking工具将多个单波段数据合成为一个文件,如下所示: 那么问题来了,合成后的数据该怎样拆开为原来的单波段呢?今天我们就来学习一种…

php表格怎么合并单元格格式化,table标签的结构与合并单元格的实现方法

1.示例代码&#xff1a;复制代码 代码如下:#1234一个完整的例子&#xff1a;复制代码 代码如下:#FirstnameLastnamePhoneQQ1qianshou111111111111111111112qianshou111111111111111111113qianshou111111111111111111114qianshou111111111111111111112.合并上下的单元格(rowspan…

Android之GridLayoutManager.setSpanSizeLookup问题

1 问题 利用BaseMultiItemQuickAdapter,用recycleView加载多布局,需要实现有些view显示一行,有些一行显示多个图片。 在BaseMultiItemQuickAdapter适配器里面根据类型加载不同布局。 public ImageMultiItemAdapter(List<MultiItemEntity> data) {super(data);addIte…

《看聊天记录都学不会C语言?太菜了吧》(9)老公饼真的有老公送?

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…

@Springboot搭建项目controller层接收json格式的对象失败

今天在使用swagger2测试的时候出错 1、requestBody注解常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容&#xff0c;比如说&#xff1a;application/json或者是application/xml等。一般情况下来说常用其来处理application/json类型。 2、 通过req…

『技术群里聊些啥』HttpClient 如何判断是同一终结点

前言官方文档对 HttpClientHandler.MaxConnectionsPerServer 属性有如下说明&#xff1a;获取或设置使用 HttpClient 对象发出请求时允许的最大并发连接数&#xff08;每个服务器终结点&#xff09;。请注意&#xff0c;该限制针对每个服务器终结点&#xff0c;例如&#xff0c…

【Envi风暴】Envi 5.3 SP1经典安装手把手图文教程(含补丁文件)

Envi 5.3具有传感器和数据支持、图像处理和显示、用户界面、二次开发等新功能,本文讲解Envi 5.3 SP1完全安装教程。 下载后的软件包目录如下所示: 目录 一、Envi 5.3 SP1安装 二、Envi 5.3 SP1下载地址 一、Envi 5.3 SP1安装 点击IDL_ENVI5.3 SP1win64.exe,开始安装,…

apache php url重写语法,apache url重写实现伪静态

前段时间项目为了配合seo的工作&#xff0c;把现有的php网站改成静态页面&#xff0c;刚拿到需求时候第一感觉就是用静态页面啊&#xff0c;可是看了一会以后发现页面有点多4、50个&#xff0c;没办法就用比较简单的url重写(apache的)吧&#xff0c;去掉这个前面的#,启用它Load…

Android之用java的socket写服务器提示java.net.BindException: Address already in use

1 问题 在Android activity里面Java socket服务器,然后关闭activity再打开activity开启服务的时候提示错误如下 java.net.BindException: Address already in use 很明显这个,IP和端口的的socket已经使用了,我们只需要在关闭activity的时候关闭serverSocket就行了。 2 解…

《看聊天记录都学不会C语言?太菜了吧》(10)程序媛聪明绝顶了

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…

List 集合转换为String

开发中会用到把 List<string> 的内容拼接成以逗号分隔的字符串的形式,现总结如下&#xff1a; 方法一: public String listToString(List list, char separator) { StringBuilder sb new StringBuilder(); for (int i 0; i < list.size(); i) { …

[leetcode]Pascal#39;s Triangle II

问题叙述性说明&#xff1a; Given an index k, return the kth row of the Pascals triangle. For example, given k 3, Return [1,3,3,1]. Note: Could you optimize your algorithm to use only O(k) extra space? 思路&#xff1a; the mth element of the nth row of th…

遥感方法研究张掖市1999-2010年土地利用变化

【方法思路】:本文选取张掖地区两期影像(Landsat 1999-07-07,2010-09-07),用监督分类方法获取各期土地利用类型,与已有的土地利用现状矢量图(landuse2000)相叠加,通过对比分析,进而得出张掖市1999-2010年间土地利用变化情况。 一、实验数据 采用Landsat Tm影像,原始…