<progress>标签有两个属性:value和max,value表示<progress>标签当前值,max定义一个最大值,value必须小于等于max。
例子:利用<progress>标签做一个下载进度条:
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Document</title>
????<style type="text/css">
????????body{
????????????font-size: 13px;
????????}
????????p{
????????????padding: 0px;
????????????margin: 0px;
????????}
????????.inputbtn{
????????????border: solid 1px #ccc;
????????????background-color: #eee;
????????????line-height: 18px;
????????????font-size: 12px;
????????}
????</style>
</head>
<body>
????<P id="pTip">开始下载</P>
????<progress value="0" max="100" id="proDownFile"></progress>
????<input type="button" value="下载" class="inputbtn" onclick="Btn_Click();">
????<script type="text/javascript">
????????var intValue = 0;
????????var intTimer;
????????var objPro = document.getElementById(‘proDownFile‘);
????????var objTip = document.getElementById(‘pTip‘);
????????//定时事件
????????function Interval_handler(){
????????????intValue++;
????????????objPro.value = intValue;
????????????if (intValue >= objPro.max) {
????????????????clearInterval(intTimer);
????????????????objTip.innerHTML = "下载完成!";
????????????}else{
????????????????objTip.innerHTML = "正在下载" + intValue + "%";
????????????}
????????}
????????//下载按钮单击事件
????????function Btn_Click(){
????????????intTimer = setInterval(Interval_handler, 100);
????????}
????</script>
</body>
</html>
原文:http://www.cnblogs.com/2BLIS/p/4945542.html