html5 progress标签
1.progress属性:
value:表示当前进度
max:表示总进度
注:value和max属性的值必须大于0,value的值小于或等于max属性的值。
<progress id="W3Cfuns_progress" max="100"></progress>
<progress> 标签定义运行中的进度(进程)。
可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。
<script type="text/javascript">
var newValue = 0;
function button_click(){
var progressBar = document.getElementById('p');
newValue = 0;
progressBar.getElementsByTagName('span')[0].textContent = 0;
setTimeout("updateProgress()",500);
}
function updateProgress(){
if(newValue>100){
return ;
}
var progressBar = document.getElementById('p');
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
setTimeout("updateProgress()",500);
newValue++;
}
<body>
<section>
<h1>progress元素的使用</h1>
<p>完成百分比:<progress id="p" max="100"><span>0</span>%</progress></p>
<input type="button" onClick="button_click()" value="请点击" />
</section>
</body>
兼容性:FF,Chrome,Opera中显示进度条。在IE,Safari,Netscape只显示百分比