Progress
这个标签用来表示进度,常用来表示下载的进度。
<progress value="22" max="100"></progress>
默认的样式就是这样,这个样式是可以修改的。
value:当前值
max:最大值
当前值/最大值=当前的比例(就是进度了)
一个上传显示进度的小案例: 我这里用的是表单的异步上传 文件上传---利用表单提交
#myProgress
{
background: ghostwhite;
width: 200px;
height: 30px;
-webkit-appearance: none;
}
::-ms-fill //针对不同的浏览器做的处理
{
background: dodgerblue;
}
::-moz-progress-bar
{
background: dodgerblue;
}
::-webkit-progress-bar //全部的(整个进度条)
{
background: ghostwhite;
}
::-webkit-progress-value //已完成的样式
{
background: dodgerblue;
}
HTML:
JS: 一些参数的解释在上面说的那篇文章里面有解释。
$("#myform").ajaxSubmit({
beforeSubmit: function (formData, jqForm, options) { //开始之前
$("#myProgress").show();
$("#per").show();
}, uploadProgress: function (event, position, total, percentComplete) { //显示进度的
$("#myProgress").val(percentComplete);
$("#per").text(percentComplete + "%");
},
success: function (data) {
$("#myProgress").hide();
$("#per").hide();
},
error: function (data, status, e) {
$("#myProgress").hide();
$("#per").hide();
NewAlertBox('ERROR', '上传失败!', 2000);
},
url: "/tool/upload_ajax.ashx",
type: "post",
dataType: "json",
timeout: 60000
});
效果:(这是我上传的过程中截的图)
Progress的更多相关文章
- HTML5 progress和meter控件
在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某 ...
- 登陆Oracle,报oracle initializationg or shutdown in progress 错误提示
前两天,登陆Oracle,发现登陆不上去了,报”oracle initializationg or shutdown in progress 错误提示” 错误. 然后就想着怎么去解决,首先自己到win ...
- The replication agent has not logged a progress message in 10 minutes.
打开Replication Monitor,在Subscription Watch List Tab中,发现有大量的status= “Performance critical” 的黄色Warning, ...
- JavaScript----Js操控-HTML5 <progress> 标签
Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...
- 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 ...
- No edit session in the progress
运行环境:开发环境:Windows7旗舰版64bit.VisualStudio2008 With SP1.ArcEngine10.0.NetFrameWork4.0.IIS7和C#开发语言. 问题描述 ...
- “ORA-01033:ORACLE initialization or shutdown in progress”错误的解决
网页上显示以下错误信息: ORA-:ORACLE initialization or shutdown in progress 启动oracle数据库,有以下提示信息 Database mounted ...
- IOS 公共类-MyMBProgressUtil Progress显示
IOS 公共类-MyMBProgressUtil Progress显示 此公共类用于显示提示框,对MBProgress的进一步封装.可以看下面的代码 接口: @interface MyMBProgre ...
- exception throw in progress runner thread_VS2015中SVN源代码无说明提交异常
1-问题描述:通过SVN将代码变更提交服务器时,你可能会遇到以下异常: exception throw in progress runner thread 2-解决办法: SVN代码源代码管理和TF ...
- Progress.js – 为页面上的任意对象创建进度条效果
Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...
随机推荐
- 【Elasticsearch】深入Elasticsearch集群
7.1 节点发现启动Elasticsearch的时候,该节点会寻找有相同集群名字且课件的主节点,如果有加入,没有自己成为主节点,负责发现的模块两个目的 选出主节点以及发现集群的新节点7.1.1发现的类 ...
- 很有用的PHP笔试题系列三
1. 什么事面向对象?主要特征是什么? 面向对象是程序的一种设计方式,它利于提高程序的重用性,使程序结构更加清晰.主要特征:封装.继承.多态. 2. SESSION 与 COOKIE的区别是什么,请从 ...
- 4、Angular2 pipe
1. stateless pipe 2.stateful pipe
- 安装 VS 2015 Update 2 + Windows SDK Tools 1.3.1 + Windows SDK 10586.212 后提示找不到 10586.0 SDK 问题的解决方法
将 Visual Studio 2015 升级到 Update 2,并安装 Windows SDK Tools 1.3.1 和 Windows SDK 10586.212 后,有可能造成原本已安装的 ...
- Win2D 官方文章系列翻译 - 预乘 Alpha
本文为个人博客备份文章,原文地址: http://validvoid.net/win2d-premultiplied-alpha/ 在计算机绘图中有两种表示颜色值不透明度的方法.Win2D 中两种方法 ...
- 人民币金额大小写Js转换
/** * 数字转中文 * @param dValue * @returns */ function chineseNumber(dValue) { var maxDec = 2; // 验证输入金额 ...
- 关于MySQLServer5.6配置问题
配置MySQL MySQL数据库下载以后在根目录添加my.ini配置文件 需要注意的是配置文件的二个属性: basedir=D:\MySqlServer # mysql所在目录 根据需求改 MySQL ...
- 通过学生-课程关系表,熟悉hive语句
通过学生-课程关系表,熟悉hive语句 1.在hive中创建以下三个表. create table student(Sno int,Sname string,Sex string,Sage int, ...
- synchronized修饰普通方法和静态方法
首先,要知道,synchronized关键字修饰普通方法时,获得的锁是对象锁,也就是this.而修饰静态方法时,锁是类锁,也就是类名.class. synchronized修饰普通方法 Synchro ...
- ATL模板库中的OLEDB与ADO
上次将OLEDB的所有内容基本上都说完了,从之前的示例上来看OLEDB中有许多变量的定义,什么结果集对象.session对象.命令对象,还有各种缓冲等等,总体上来说直接使用OLEDB写程序很麻烦,用很 ...