html5 进度条（支持谷歌和火狐哦）

来源：互联网发布：linux 安装中文语言包编辑：程序博客网时间：2024/04/30 16:20

<!DOCTYPE html>
<html>
    <head>
       <title></title>
       <style type="text/css">
           #startBtn {
               background:#0F3;
               border:2px solid #CFC;
           }
           progress {
               border:1px solid #6C0;
           }
       </style>
       <script type="text/javascript">
       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;
           }
       }
       </script>
    </head>
    <body>
       <progress id="prog" value="0" max="100" ></progress>
       <input id="startBtn" type="button" value="start" onclick="startProgress()"/> <br />
       <mark id="numValue">0%</mark>
   </body>
</html>
如果是在上传的话，可以根据上传的字节数来确定这个currProgress的值