这个标签用来表示进度,常用来表示下载的进度。

<progress value="22" max="100"></progress>

  默认的样式就是这样,这个样式是可以修改的。

value:当前值

max:最大值

当前值/最大值=当前的比例(就是进度了)

一个上传显示进度的小案例:   我这里用的是表单的异步上传    文件上传---利用表单提交

  1. #myProgress
  2. {
  3. background: ghostwhite;
  4. width: 200px;
  5. height: 30px;
  6. -webkit-appearance: none;
  7. }
  8. ::-ms-fill //针对不同的浏览器做的处理
  9. {
  10. background: dodgerblue;
  11. }
  12. ::-moz-progress-bar
  13. {
  14. background: dodgerblue;
  15. }
  16. ::-webkit-progress-bar //全部的(整个进度条)
  17. {
  18. background: ghostwhite;
  19. }
  20. ::-webkit-progress-value //已完成的样式
  21. {
  22. background: dodgerblue;
  23. }

HTML:

JS:   一些参数的解释在上面说的那篇文章里面有解释。

  1. $("#myform").ajaxSubmit({
  2. beforeSubmit: function (formData, jqForm, options) { //开始之前
  3. $("#myProgress").show();
  4. $("#per").show();
  5. }, uploadProgress: function (event, position, total, percentComplete) { //显示进度的
  6. $("#myProgress").val(percentComplete);
  7. $("#per").text(percentComplete + "%");
  8. },
  9. success: function (data) {
  10. $("#myProgress").hide();
  11. $("#per").hide();
  12. },
  13. error: function (data, status, e) {
  14. $("#myProgress").hide();
  15. $("#per").hide();
  16. NewAlertBox('ERROR', '上传失败!', 2000);
  17. },
  18. url: "/tool/upload_ajax.ashx",
  19. type: "post",
  20. dataType: "json",
  21. timeout: 60000
  22. });

效果:(这是我上传的过程中截的图)

Progress的更多相关文章

  1. HTML5 progress和meter控件

    在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某 ...

  2. 登陆Oracle,报oracle initializationg or shutdown in progress 错误提示

    前两天,登陆Oracle,发现登陆不上去了,报”oracle initializationg or shutdown in progress 错误提示” 错误. 然后就想着怎么去解决,首先自己到win ...

  3. The replication agent has not logged a progress message in 10 minutes.

    打开Replication Monitor,在Subscription Watch List Tab中,发现有大量的status= “Performance critical” 的黄色Warning, ...

  4. JavaScript----Js操控-HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  5. SharePoint Configuration Wizard - Unable to upgrade SharePoint Products and Technologies because an upgrade is already in progress

    故障描述 当要运行SharePonit Products and Technologies Configuration Wizard的时候,出现了如下图所示的错误提示. 错误信息为: Unable t ...

  6. No edit session in the progress

    运行环境:开发环境:Windows7旗舰版64bit.VisualStudio2008 With SP1.ArcEngine10.0.NetFrameWork4.0.IIS7和C#开发语言. 问题描述 ...

  7. “ORA-01033:ORACLE initialization or shutdown in progress”错误的解决

    网页上显示以下错误信息: ORA-:ORACLE initialization or shutdown in progress 启动oracle数据库,有以下提示信息 Database mounted ...

  8. IOS 公共类-MyMBProgressUtil Progress显示

    IOS 公共类-MyMBProgressUtil Progress显示 此公共类用于显示提示框,对MBProgress的进一步封装.可以看下面的代码 接口: @interface MyMBProgre ...

  9. exception throw in progress runner thread_VS2015中SVN源代码无说明提交异常

    1-问题描述:通过SVN将代码变更提交服务器时,你可能会遇到以下异常:  exception throw in progress runner thread 2-解决办法: SVN代码源代码管理和TF ...

  10. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

随机推荐

  1. pat1012. The Best Rank (25)

    1012. The Best Rank (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue To eval ...

  2. Linux kernel workqueue机制分析

    Linux kernel workqueue机制分析 在内核编程中,workqueue机制是最常用的异步处理方式.本文主要基于linux kernel 3.10.108的workqueue文档分析其基 ...

  3. 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP

    前言 Bob大叔提出并发扬了S.O.L.I.D五大原则,用来更好地进行面向对象编程,五大原则分别是: The Single Responsibility Principle(单一职责SRP) The ...

  4. SpringSecurity 3.2入门(4)登录密码加密

    密码admin 进行MD5 32位加密为21232F297A57A5A743894A0E4A801FC3 增加spring-security.xml文件配置如下 <!-- 认证管理器,配置Spr ...

  5. 关于“System.Data.ProviderIncompatibleException”类型的异常

    作为刚学习MVC的菜鸟,因为平常的不努力学习.看书,所以只能参考官方的教程学习操作新手入门 一步一步认真的做,前天晚上出现了一个关于数据库连接字符串错误的问题,自己查了很多资料, 问了许多大神,他们的 ...

  6. 调试.NET程序OutOfMemoryException (转载)

    原文地址:http://blog.csdn.net/directionofear/article/details/8009427 应用程序调试,需要有个常规的调试思路,应对各类问题最基本的调试手段是什 ...

  7. String方法使用示例

    import java.lang.String; public class StringMethodDemo1{ /** 熟悉String的常用方法. */ public static void ma ...

  8. 【Spring Cloud】与Spring Boot版本匹配关系

    Spring Cloud版本演进情况如下: 版本名称 版本Finchley snapshot版Edgware snapshot版Dalston SR1 当前最新稳定版本Camden SR7 稳定版本B ...

  9. Android开发之EditText利用键盘跳转到下一个输入框

    以前做项目的时候,从来没考虑过这些.这段时间公司内部用的一款APP,就出现了这个问题,在登录或者注册的时候,点击键盘的回车按钮,可以跳到下一个输入框的功能,这个属性一直也没记住,今天就把自己一直没记过 ...

  10. Vue2.0+Node.js+MongoDB全栈打造商城系统

    vue.js +axios mock数据 在main.js中 import axios from 'axios' Vue.prototype.$ajax = axios webpack.dev.con ...