Chinaunix首页 | 论坛 | 博客

dodolovely 的小窝dodolovely.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

zm_wl

  • 博客访问： 635886
  • 博文数量： 79
  • 博客积分： 2616
  • 博客等级： 少校
  • 技术积分： 1036
  • 用 户 组： 普通用户
  • 注册时间： 2010-11-28 17:41
个人简介

苏北下邳附近人氏， 跟项羽、刘邦老乡，吕布很不幸，死在俺家门口那块小麦田上。 爱好家乡的小麦煎饼、盐豆子！ 新浪微博：@dodolovely

文章分类

全部博文（79）

文章存档

2013年（2）

2012年（67）

2011年（1）

2010年（9）

我的朋友
最近访客
推荐博文
相关博文
HTML5中的进度条简介

分类： Python/Ruby

2012-08-08 11:53:48

为了演示方便，在第一个例子中，我们通过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中的进度条使用的是标签，在这里，设置了开始的值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"); 
  9. } 

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

  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. { 
  9.     document.getElementById("startBtn").disabled = false; 
  10.     done = false; 
  11.     currProgress = 0; 
  12. } 

最后完成的代码如下：

  1. > 
  2. <html> 
  3. <head> 
  4. <title>Developer Drive | Displaying the Progress of Tasks with HTML5 | Demotitle> 
  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.     document.getElementById("startBtn").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 HTML5a>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> 

来自：51CTO

阅读(1847) | 评论(0) | 转发(0) |
0

上一篇：40 个很有用的 Mac OS X Shell 脚本和终端命令

下一篇：2012年8月编程语言排行榜-C领衔称霸Obj-C强势爬升

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6