BackgroundPositionAnimate.js下载

需要导入的js:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/BackgroundPositionAnimate.js"></script>

展示数字滚动效果的html元素:

<div>
下载量:<span class="t_num"></span>次
</div>

通过异步请求获取数据:

function getdata(){
$.ajax({
url: 'data.php',
type: 'POST',
dataType: "json",
cache: false,
timeout: 10000,
error: function(){},
success: function(data){
show_num(data.count);
}
});
}
//表示查询传递的数字
function show_num(n){
var it = $(".t_num i");
var len = String(n).length;
for(var i=0;i<len;i++){
if(it.length<=i){
$(".t_num").append("<i></i>");
}
var num=String(n).charAt(i);
var y = -parseInt(num)*30; //y轴位置
var obj = $(".t_num i").eq(i);
obj.animate({ //滚动动画
backgroundPosition :'(0 '+String(y)+'px)'
}, 'slow','swing',function(){}
);
}
}

设置定时:

$(function(){
getdata();
setInterval('getdata()', 3000);//每隔3秒执行一次
});

ajax异步请求获取数据,实现滚动数字的效果。的更多相关文章

  1. 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送

    1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...

  2. uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题?

    总结/朱季谦 先前有一次做uni-app的js接口对接时,遇到过这样的情况,在for循环里,调用一个异步请求时,返回来的值顺序是乱的,因此,在以下的代码里,push到数组里的值,每次的顺序可能都是不一 ...

  3. scrapy爬虫之模拟ajax post请求获取数据

    实质:分析真实请求地址,根据规则构造新地址从而获得数据. 分析发现数据是通过异步ajax方式→post 获得的 于是通过分析response ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 发现每次翻页 网 ...

  4. Ajax异步请求PHP数据

    来源:http://www.ido321.com/1138.html 接到了老师的一个作业,实现的布局如图: 如果输入了科室ID,科室名字只显示与ID对应的,若没有输入,则显示全部,然后根据I科室名字 ...

  5. 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  6. jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...

  7. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  8. ajax异步请求不能刷新数据的问题

    搞了两三天的问题,今天解决了.总结下: function reportGrpChange(cuid, title){ document.getElementById('reportFrameDiv') ...

  9. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

随机推荐

  1. 【hihocoder 1304】搜索一·24点

    [题目链接]:http://hihocoder.com/problemset/problem/1304 [题意] [题解] 按照题目给的方法搜索就好; 那个方法很棒啊. 注意除0; 然后是浮点数的比较 ...

  2. CodeForcesGym 100641B A Cure for the Common Code

    A Cure for the Common Code Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on  ...

  3. [HTML5] Accessibility Implementation for complex component

    When you developing a complex component by your own, one thing you cannot ignore is Accessibility. C ...

  4. CC2540 与 CC2541 差别 1

    CC2540 的 1234 PIN 是 USB 功能,4 PIN 是 USB 的电压输入引脚. CC2541 没有 USB 功能.它的 1234 PIN 是 I2C 功能,为了与 CC2540 引脚兼 ...

  5. 【Android 初学】13、Broadcast Receiver

    Broadcast Receiver Android广播机制包括三个基本要素:广播(Broadcast) - 用于发送广播.广播接收器(BroadcastReceiver) - 用于接收广播:意图内容 ...

  6. 利用flashback transaction query新特性进行事务撤销

    具备了flashback version query查询的基础,我们就可以进行基于flashback version query的恢复.这就是flashback transaction query.f ...

  7. ORACLE查询闪回

    在Oracle中如果错误地提交了修改操作,然后想查看修改前的值,这时候可以使用查询闪回(query flashback). 查询闪回可以根据根据一个时间值或者系统变更号(SCN)进行. 执行闪回操作, ...

  8. USACO 2.2 Preface Numbering

    Preface Numbering A certain book's prefaces are numbered in upper case Roman numerals. Traditional R ...

  9. 如何使用github来展示自己的网页

    项目文档或者单纯的html页面怎么用github来展示呢? 第一步:新建库 第二步: 上传自己的页面(index.html需在根目录下) 先把git库克隆下来 进入lineShop文件夹,拷贝自己的页 ...

  10. thinkPHP5 报错session_start(): No session id returned by function解决方法

    这是因为用Redis接管了session状态储存,但是Redis又连接不正常导致的 在服务器上查看Redis运行状态一切正常,set.get也没有问题,最后琢磨了半天才发现是PHPRedis扩展没有安 ...