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只显示百分比

 

 

 

 

 

 

 

 

 

posted @ 2012-11-07 10:13  hlp鹏  阅读(364)  评论(0编辑  收藏  举报