jquery defered的progress方法实现进度条
效果如图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
padding:30px;
background-color: lightblue;
}
.progressbar{
height: 10px;
width: 300px;
background-color:#fff;
}
.progressnum{
font-size:40px;
color:#fff;
text-align: center;
width: 300px;
margin:0 auto;
margin-bottom:40px;
}
</style>
</head>
<body>
<div class="progressnum"></div>
<div class="progressbar"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
var bar = function(){
var $d = $.Deferred();
setTimeout(function(){
$d.resolve();
},3000);
return $d;
} polling(bar());
}); function polling(d){
var bar = $('.progressbar')[0],
$num = $('.progressnum');
d.progress(function(n){
console.log(n);
$num.html(Math.floor(n/3) + '%');
bar.style.width = n + 'px';
}); var n = 10,
count = 0;
var timer = setInterval(function(){
console.log('nodify: ' + n);
if(d.state() != 'pending'){
clearInterval(timer);
}
n += 10;
d.notify(n);
},100);
}
</script>
</body>
</html>
jquery defered的progress方法实现进度条的更多相关文章
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- Xamarin XAML语言教程通过ProgressTo方法对进度条设置
Xamarin XAML语言教程通过ProgressTo方法对进度条设置 在ProgressBar中定义了一个ProgressTo方法,此方法也可以用来对进度条当前的进行进行设置,ProgressTo ...
- Xamarin XAML语言教程使用方法设置进度条进度
Xamarin XAML语言教程使用方法设置进度条进度 在ProgressBar中定义了一个ProgressTo方法,此方法也可以用来对进度条当前的进行进行设置,ProgressTo与Progress ...
- Xamarin XAML语言教程Progress属性设置进度条进度
Xamarin XAML语言教程Progress属性设置进度条进度 在图12.19~12.21中我们看到的是没有实现加载的进度条,即进度条的当前进度为0,如果开发者想要修改当前进度,可以使用两种方式: ...
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...
- [整理] C#调用SQLDMO.DLL时间数据库备份 / 还原。 (香神无涯) // C#实现SQLSERVER2000数据库备份还原的两种方法 (带进度条)
/// <summary>/// 通过调用MSSQL的SQLDMO.DLL文件来实现备份数据库/// 1.首先在在项目中引用SQLDMO.DLL文件./// 2.在引用中的SQLDMO.D ...
- Xamarin XAML语言教程隐藏文件使用Progress属性设置进度条
Xamarin XAML语言教程隐藏文件使用Progress属性设置进度条 Xamarin XAML语言教程隐藏文件中使用Progress属性设置进度条进度,开发者除了可以在XAML中使用Progre ...
- progress组件（进度条）
progress组件:进度条 progress组件的属性: percent:类型:number 设置百分比 (0~100) show-info:类型:布尔 在进度条右侧显示百分比 border-rad ...
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
随机推荐
- spring cloud 学习之 服务注册和发现(Eureka)
一:服务注册和发现(Eureka) 1:采用Eureka作为服务注册和发现组件 2:Eureka 项目中 主要在启动类加上 注解@EnableEurekaServer @SpringBootAppli ...
- LeetCode207 课程表
问题:课程表 现在你总共有 n 门课需要选,记为 0 到 n-1. 在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹配来表示他们: [0,1] 给定 ...
- Nginx 配置继承模型
要了解nginx的继承模型,首先需要知道nginx使用多个配置块进行操作.在nginx中,这样的块被称为上下文,例如,放置在服务器上下文中的配置指令驻留在server { }块中,就像放置在http上 ...
- DrawGrid 做图片显示 代码简单 参考性强 (Delphi7)
运行效果图 源码 http://files.cnblogs.com/lwm8246/DrawGrid_demo.rar procedure TfrmMain.GridDrawCell(Send ...
- pageScope、requestScope、sessionScope、applicationScope的区别
https://www.cnblogs.com/qianbaidu/p/6006459.html 1.区别: 1.page指当前页面有效.在一个jsp页面里有效 2.request 指在一次请求的全过 ...
- C语言进阶——goto 和 void 的分析08
遭人遗弃的goto: 高手潜规则:禁止使用goto 项目经验:程序质量与goto的出现次数成反比 最后的判决:将goto打入冷宫 程序示例1:(goto副作用分析) #include <stdi ...
- urllib使用一
urllib.urlopen()方法: 参数: 1.url(要访问的网页链接http:或者是本地文件file:) 2.data(如果有,就会由GET方法变为POST方法,提交的数据格式必须是appli ...
- ISCSI网络存储
ISCSI(iSCSI,Internet Small Computer System Interface) iSCSI技术实现了物理硬盘设备与TCP/IP网络协议的相互结合,使得用户可以通过互联网方便 ...
- Hive LanguageManual DDL
hive语法规则LanguageManual DDL SQL DML 和 DDL 数据操作语言 (DML) 和 数据定义语言 (DDL) 一.数据库 增删改都在文档里说得也很明白,不重复造车轮 二.表 ...
- PHP.28-TP框架商城应用实例-后台5-多表操作-商品表与品牌表
表与表之间的关系:1:1 1:多 多:多 功能需求决定表关系 此处的表关系为:品牌表:商品表=1:多 1.首先在表结构上关联,在多的表(商品表)添加一个字段,关联一的表(品牌表)的ID(主键) 添加字 ...