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 ...
随机推荐
- Nginx+php+mysql+wordpress搭建自己的博客站点
服务器环境要求Centos 6 或以上版本(由于我们的目标是半小时内搭建好,那就选简单yum安装)MySQL 5或更新版本Nginx 1或更新版本PHP 5 或更新版本 php-fpm 5或更新版本 ...
- dialog BLE SDK 学习（3）
dialog DA14580 SDK版本:5.0.4. 本文介绍了DA14580 SDK的学习感想和建议,分享给大家. 首先,Dialog官网上的资料挺全的,但是是英文的,如果英文不好,比如笔者,阅读 ...
- 笔记-scrapy-extentions
笔记-scrapy-extentions 1. extentions 1.1. 开始 The extensions framework provides a mechanism for ...
- Python数据挖掘-航空公司客户价值分析
出处:http://www.ithao123.cn/content-11127869.html 航空公司客户价值分析 目标:企业针对不同价值的客户制定个性化的服务,将有限的资源集中于高价值客户. 1. ...
- python和matlab
一.python简介 python是一种面向对象的解释型计算机程序设计语言.python是纯粹的自由软件,源代码和解释器CPython遵循GPL协议.Python语法简介清晰,特色之一是强制用空白符作 ...
- Column 'sort' specified twice错误
我使用的是mybatis框架出现的这个问题,如果你们也出现了这个问题的豪华,我想你们的sql代码一定是复制的吧,额哈哈哈
- 如何在react里嵌入iframe？
无法访问iframe地址 index.js文件 import React from 'react'; import ReactDOM from 'react-dom'; import App from ...
- HNOI2018 摸鱼记
HNOI2018 摸鱼记 今天我又来记流水账啦 Day 0 颓废的一天. 我,球爷和杜教在颓膜膜.io ych看起来在搓碧蓝 鬼知道哥达鸭干了什么 学习氛围只局限在机房的一角 后来全体Oier开会,5 ...
- laravel5.5门面
Facades为应用程序的 服务容器 中可用的类提供了一个 静态接口 . 最直观的好处 就是需记住必须手动注入或配置的长长的类名.因此有人也理解Facades就是一个"快捷别名" ...
- DOS程序员手册（十一）
560页 版本5中新增加的子功能05h支持程序截获MS-DOS EXEC调用,并实 现自我装载.该子功能能实现内存的修补,如设置装载程序能接收的版本号 (通过SETVER设置的版本号)以及实现对装载程 ...