在Web开发中,进度条是很常见的一种表示工作进度的方式。在过往的Web设计中,都必须使用第三方类库等去实现进度条。而在HTML5的世界中,已经在不少的浏览器的内置实现了进度条。在本文中,将讲解如何在页面中使用HTML5的进度条,目前HTML5的进度条只支持在Firefox,Chrome和Opera中得到支持,在IE和Safari中还没得到支持。
为了演示方便,在第一个例子中,我们通过Javascript去控制时间从而不断地更新进度,并且允许用户通过点击按钮开始进度条的更新,一旦进度条开始更新,则按钮变得不可点击。如果进度条完成的话,则又可以点击按钮,整个进度条在Firefox的效果如下图:
下面我们开始一步步实做这个效果:
1)创建HTML5 页
首先创建基本的HTML 5基本框架页
1. >
2. <html>
3. <head>
4. <script type="text/javascript">
5.
6. </script>
7. </head>
8. <body>
9.
10. </body>
11. </html>
2) 增加进度条标签
首先,在body部分,添加如下的进度条的标签:
1. <p>Task progress:</p>
2. progress id="prog" value="0" max="100"></progress>
HTML 5中的进度条使用的是<progress>标签,在这里,设置了开始的值value为0,最大的值为100,当任务完成后,进度条的值就会变成100了。我们将通过Javascript去更新这个值,所以以上的标签只是对进度条进行了初始化工作。
3) 点击按钮的编写
现在,我们开始编写点击按钮的事件,代码如下:
1. <input id="startBtn" type="button" value="start" onclick="startProgress()"/>
2. <div id="numValue">0%</div>
其中startProcess()的代码如下:
- //当前进度
- var
- //进度条是否完成
- var done = false;
- //进度条计数的最大数值
- var
在声明了上面的变量后,就可以编写startProgress()方法了,代码如下:
function startProgress() {
//获得进度条的标签
var prBar = document.getElementById("prog");
//获得开始按键
var startButt = document.getElementById("startBtn");
//显示的进度百分比数值
var val = document.getElementById("numValue");
}
接下来,当用户点了开始按钮后,需要将按钮设置为不可用,并且要更新进度条的数值:
1. startButt.disabled=true;
2.
3. prBar.value = currProgress;
并且要显示出进度条当前完成的百分比并显示出来,使用如下的代码:
1. val.innerHTML =Math.round((currProgress/total)*100)+"%";
接着就可以对进度条的数字进行累加了:
- currProgress++;
并且要判断如果进度数值达到100的话,则停止,设置done=false的标识,否则每0.1秒通过Javascript的setimeout方法进行延时,如下:
1. if(currProgress>100) done=true;
2. //如果还没到进度条100的数值,则继续累加
3. if(!done)
4. "startProgress()", 100);
5.
6. //如果进度条已经达到100的数值,则重新设置按钮可用,重新设置currProgrss=0
7. else
8. {
9. "startBtn").disabled = false;
10. false;
11. currProgress = 0;
12. }
最后完成的代码如下:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Developer Drive | Displaying the Progress of Tasks with HTML5 | Demo</title>
5. <script type="text/javascript">
6. var currProgress = 0;
7. var done = false;
8. var total = 100;
9.
10. function startProgress() {
11. var prBar = document.getElementById("prog");
12. var startButt = document.getElementById("startBtn");
13. var val = document.getElementById("numValue");
14. startButt.disabled=true;
15. prBar.value = currProgress;
16. val.innerHTML = Math.round((currProgress/total)*100)+"%";
17.
18. currProgress++;
19. if(currProgress>100) done=true;
20. if(!done)
21. setTimeout("startProgress()", 100);
22. else
23. {
24. .disabled = false;
25. done = false;
26. currProgress = 0;
27. }
28. }
29. </script>
30. </head>
31. <body>
32.
33. <p>This is a demo to accompany the following tutorial: <a href="http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5">Displaying the Progress of Tasks with HTML5</a></p><hr/>
34.
35. <p>Task progress:</p>
36. <progress id="prog" value="0" max="100"></progress>
37. <input id="startBtn" type="button" value="start" onclick="startProgress()"/>
38. <div id="numValue">0%</div>
39.
40. </body>
41. </html>