Progress
2024-09-25 18:08:25
这个标签用来表示进度,常用来表示下载的进度。
<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
});
效果:(这是我上传的过程中截的图)
最新文章
- 【强烈推荐】如何给TortoiseGit 配置密钥?
- gcc编译的四个阶段:预处理,编译,汇编,链接
- Is WPFdead
- kafka常用操作命令
- 使用git提交github代码
- 利用dsniff的tcpkill杀TCP连接
- return的用法
- db2数据库中查找数据库表
- 完美逆向百度手机助手5.0底部菜单栏 - Android Tabhost 点击动画
- Httpservlet cannot be resolved to a type
- GDI+ Tutorial for Beginners
- python数据分析入门学习笔记
- Linux系统Shell脚本编程
- centos7安装notepadqq
- ansible-host file
- 配置GitHub的SSH key
- MS SQL作业Schedule的限制注意事项
- Android笔记(五):广播接收者(Broadcast Receiver)
- 006-docker-安装-nginx
- Java&; Vector与ArrayList区别