我们首先需要新建一个html5的页面，其使用的progress元素实在html5时代才出现的。
我们在新建的页面中，输入一个段落标签，一个进度条，一个button按钮。
然后，我们需要设置一下进度条显示的进度。value代表从多少开始，max代表到多少结束。我们做的是百分比形式的，应该写成这样的。
这些做好之后，我们需要书写两个小的事件，实现原理大体上是鼠标单击下载按钮，开始下载变为正在下载百分之多少，等到达到我们预设的时间后显示下载完成。
我们之前已经给p标签和progress标签分别赋予了不同的id，我们需要获取到这两个元素，并将他们赋给两个变量。
我们还要将progress的初始值设为0,当鼠标单击的时候，我们以一定的时间为周期调用写好的事件。
函数写好之后，我们在浏览器中调试，点击下载按钮之后会在300ms内完成下载时间。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.jdtbox {
padding: 10px 0
}
.jdt_dbg {
background: #fce5e5
width: 196px
height: 18px
border-radius: 10px
-webkit-border-radius: 10px
overflow: hidden
border-top: 1px solid #f9d1d1
}
.jdt_mbg {
background: #f12938
height: 18px
width: 75%
height: 20px
}
</style>
<script type="text/javascript">
$(function() {
$(".jdt_mbg").animate({
width : "50%",
}, 1000)
})
</script>
<body>
<form action="http://192.168.1.106:8080/app/img/multiUpload" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgFile" type="file" multiple="multiple" accept="image/gif, image/jpeg" />
<input name="upload" type="submit" value="上传" />
</form>
<div class="jdtbox">
<div class="jdt_dbg">
<div class="jdt_mbg" style="width: ${investDetail.percent*100"></div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）