HTML5中的进度条简介

译文
移动开发
在Web开发中,进度条是很常见的一种表示工作进度的方式。在过往的Web设计中,都必须使用第三方类库等去实现进度条。而在HTML5的世界中,已经在不少的浏览器的内置实现了进度条。在本文中,将讲解如何在页面中使用HTML5的进度条,目前HTML5的进度条只支持在Firefox,Chrome和Opera中得到支持,在IE和Safari中还没得到支持。

为了演示方便,在***个例子中,我们通过Javascript去控制时间从而不断地更新进度,并且允许用户通过点击按钮开始进度条的更新,一旦进度条开始更新,则按钮变得不可点击。如果进度条完成的话,则又可以点击按钮,整个进度条在Firefox的效果如下图:

下面我们开始一步步实做这个效果:

1)创建HTML5 页

首先创建基本的HTML 5基本框架页

  1.    <!DOCTYPE html> 
  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()的代码如下:

  1. //当前进度  
  2. var currProgress = 0;  
  3. //进度条是否完成  
  4. var done = false;  
  5. //进度条计数的***数值  
  6. var total = 100;  

 

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

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

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

  1. startButt.disabled=true
  2.  
  3. prBar.value = currProgress; 

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

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

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

  1. currProgress++; 

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

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

 

***完成的代码如下:

  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.     document.getElementById("startBtn").disabled = false
  24.     done = false
  25.     currProgress = 0
  26. </script> 
  27. </head> 
  28. <body> 
  29.  
  30. <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/> 
  31.  
  32. <p>Task progress:</p> 
  33. <progress id="prog" value="0" max="100"></progress>  
  34. <input id="startBtn" type="button" value="start" onclick="startProgress()"/> 
  35. <div id="numValue">0%</div> 
  36.  
  37. </body> 
  38. </html> 

 

 

责任编辑:佚名 来源: 51CTO.com
相关推荐

2012-06-20 11:19:04

jQuery

2015-07-31 11:19:43

数字进度条源码

2015-01-12 12:13:03

Android进度条ProgressDia

2015-01-12 09:30:54

Android进度条ProgressDia

2021-11-02 07:44:36

CSS 技巧进度条

2011-07-05 15:16:00

QT 进度条

2009-06-06 18:54:02

JSP编程进度条

2023-12-11 17:15:05

应用开发波纹进度条ArkUI

2015-08-03 11:39:20

拟物化进度条

2013-03-12 10:35:06

CSS 3

2012-01-17 13:58:17

JavaSwing

2022-03-07 15:40:51

Linux软件代码

2009-12-25 17:58:12

WPF进度条

2009-08-18 09:49:00

C# listview

2009-08-17 15:48:47

C# WinForm进

2009-08-17 14:41:47

C#进度条实现

2022-04-04 21:33:48

进度条Python

2023-07-18 15:49:22

HTMLCSS

2009-11-24 15:23:50

PHP文件上传进度条

2012-07-13 13:52:54

Canvas
点赞
收藏

51CTO技术栈公众号