效果如图：

实现代码：

<!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方法实现进度条的更多相关文章

  1. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  2. Xamarin XAML语言教程通过ProgressTo方法对进度条设置

    Xamarin XAML语言教程通过ProgressTo方法对进度条设置 在ProgressBar中定义了一个ProgressTo方法,此方法也可以用来对进度条当前的进行进行设置,ProgressTo ...

  3. Xamarin XAML语言教程使用方法设置进度条进度

    Xamarin XAML语言教程使用方法设置进度条进度 在ProgressBar中定义了一个ProgressTo方法,此方法也可以用来对进度条当前的进行进行设置,ProgressTo与Progress ...

  4. Xamarin XAML语言教程Progress属性设置进度条进度

    Xamarin XAML语言教程Progress属性设置进度条进度 在图12.19~12.21中我们看到的是没有实现加载的进度条,即进度条的当前进度为0,如果开发者想要修改当前进度,可以使用两种方式: ...

  5. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

  6. [整理] C#调用SQLDMO.DLL时间数据库备份 / 还原。 (香神无涯) // C#实现SQLSERVER2000数据库备份还原的两种方法 (带进度条)

    /// <summary>/// 通过调用MSSQL的SQLDMO.DLL文件来实现备份数据库/// 1.首先在在项目中引用SQLDMO.DLL文件./// 2.在引用中的SQLDMO.D ...

  7. Xamarin XAML语言教程隐藏文件使用Progress属性设置进度条

    Xamarin XAML语言教程隐藏文件使用Progress属性设置进度条 Xamarin XAML语言教程隐藏文件中使用Progress属性设置进度条进度,开发者除了可以在XAML中使用Progre ...

  8. progress组件（进度条）

    progress组件:进度条 progress组件的属性: percent:类型:number 设置百分比 (0~100) show-info:类型:布尔 在进度条右侧显示百分比 border-rad ...

  9. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

随机推荐

  1. 时间戳与QDateTime相互转换

    最近项目中需要将日期时间输出到Excel中,程序使用Qt开发,使用第三方库QtXlsx进行Excel读写操作.Excel中第一列为时间,时间间隔为1小时,如图所示. 赋值起始时间stDTime,则后续 ...

  2. C/C++程序基础 （十）模板和泛型

    什么是泛型编程 基于模板,有效将算法和数据结构分离. 模板 包括类型和参数 模板函数:抽象的函数定义,代表一类同构函数.编译器在其调用位置自动完成对应模板函数的实例化. 模板类:抽象的类定义,代表更高 ...

  3. php面向对象（2）值传递

    PHP中值传递方式,2中 值传递:传递的时候,拷贝的是数据本身.默认都是值传递 结果:传递完成,有了2份同样的数据,且2个变量“相互独立”,不会相互影响 引用传递:传递的时候,拷贝的是引用关系(数据的 ...

  4. RNN-GRU-LSTM变体详解

    首先介绍一下 encoder-decoder 框架 中文叫做编码-解码器,它一个最抽象的模式可以用下图来展现出来: 这个框架模式可以看做是RNN的一个变种:N vs M,叫做Encoder-Decod ...

  5. struct2 命名空间

    转自http://blog.csdn.net/carefree31441/article/details/4857546 使用Struts2,配置一切正常,使用常用tag也正常,但是在使用<s: ...

  6. 20145202 《信息安全系统设计基础》git安装

    git的安装 直接输入指令将其安装就可以了. 安装的时候要设置公钥,我不知道以前在windows上设置过的公钥是否还能用所以我就还是从新搞了一个. 验证可以连通 遇到的问题

  7. 运行SparkStreaming程序时出现 Exception in thread "main" java.lang.NoSuchMethodError: scala.Predef$.ArrowA异常

    Exception in thread "main" java.lang.NoSuchMethodError: scala.Predef$.ArrowA 这个问题是版本不统一导致的 ...

  8. 平时收集的一些有关UED的团队和个人博客

    平时收集的一些有关UED的团队和个人博客 前端团队阿里巴巴 UED -- 我们设计的界面,并没有几十亿的流量,但每天来自上百个国家的百万商人在使用着.阿里巴巴中国站UED -- 阿里巴巴中国站UED成 ...

  9. WebApi实现Ajax模拟Multipart/form-data方式多文件上传

    前端页面代码: <input type="file" class="file_control" /><br /> <input t ...

  10. BAD_ACCESS在什么情况下出现？如何调试BAD_ACCESS错误

    1. 访问一个僵尸对象,访问僵尸对象的成员变量或者向其发消息 死循环 2. 设置全局断点快速定位问题代码所在行 开启僵尸对象调试功能