HTML5中的进度条简介

   
Task progress:
 
progress id="prog" value="0" max="100"> 

   
 
0%

其中startProcess()的代码如下：

   
//当前进度  
var currProgress = 0;  
//进度条是否完成  
var done = false;  
//进度条计数的最大数值  
var total = 100;  

在声明了上面的变量后，就可以编写startProgress()方法了，代码如下：

   
     
function startProgress() { 
 
 //获得进度条的标签 
var prBar = document.getElementById("prog"); 
//获得开始按键 
var startButt = document.getElementById("startBtn"); 
//显示的进度百分比数值 
var val = document.getElementById("numValue"); 
} 

接下来，当用户点了开始按钮后，需要将按钮设置为不可用，并且要更新进度条的数值：

    
startButt.disabled=true; 
 
prBar.value = currProgress; 

并且要显示出进度条当前完成的百分比并显示出来，使用如下的代码：

   
val.innerHTML =Math.round((currProgress/total)*100)+"%";

接着就可以对进度条的数字进行累加了：

   
currProgress++; 

并且要判断如果进度数值达到100的话，则停止，设置done=false的标识，否则每0.1秒通过Javascript的setimeout方法进行延时，如下：

   
 if(currProgress>100) done=true; 
//如果还没到进度条100的数值，则继续累加 
if(!done) 
    setTimeout("startProgress()", 100); 
 
//如果进度条已经达到100的数值，则重新设置按钮可用，重新设置currProgrss=0 
else     
{ 
    document.getElementById("startBtn").disabled = false; 
    done = false; 
    currProgress = 0; 
} 

最后完成的代码如下：

   
 
 
 
 
 
var currProgress = 0; 
var done = false; 
var total = 100; 
 
function startProgress() { 
var prBar = document.getElementById("prog"); 
var startButt = document.getElementById("startBtn"); 
var val = document.getElementById("numValue"); 
startButt.disabled=true; 
prBar.value = currProgress; 
val.innerHTML = Math.round((currProgress/total)*100)+"%"; 
 
currProgress++; 
if(currProgress>100) done=true; 
if(!done) 
    setTimeout("startProgress()", 100); 
else     
{ 
    document.getElementById("startBtn").disabled = false; 
    done = false; 
    currProgress = 0; 
} 
} 
 
 
 
 
This is a demo to accompany the following tutorial: Displaying the Progress of Tasks with HTML5
 
 
Task progress:
 
  
 
0%