自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML5中的進(jìn)度條簡(jiǎn)介

譯文
作者：廖煜嶸 譯
移動(dòng)開(kāi)發(fā)
在Web開(kāi)發(fā)中，進(jìn)度條是很常見(jiàn)的一種表示工作進(jìn)度的方式。在過(guò)往的Web設(shè)計(jì)中，都必須使用第三方類庫(kù)等去實(shí)現(xiàn)進(jìn)度條。而在HTML5的世界中，已經(jīng)在不少的瀏覽器的內(nèi)置實(shí)現(xiàn)了進(jìn)度條。在本文中，將講解如何在頁(yè)面中使用HTML5的進(jìn)度條，目前HTML5的進(jìn)度條只支持在Firefox,Chrome和Opera中得到支持，在IE和Safari中還沒(méi)得到支持。

為了演示方便，在***個(gè)例子中，我們通過(guò)Javascript去控制時(shí)間從而不斷地更新進(jìn)度，并且允許用戶通過(guò)點(diǎn)擊按鈕開(kāi)始進(jìn)度條的更新，一旦進(jìn)度條開(kāi)始更新，則按鈕變得不可點(diǎn)擊。如果進(jìn)度條完成的話，則又可以點(diǎn)擊按鈕，整個(gè)進(jìn)度條在Firefox的效果如下圖：

下面我們開(kāi)始一步步實(shí)做這個(gè)效果：

1）創(chuàng)建HTML5 頁(yè)

首先創(chuàng)建基本的HTML 5基本框架頁(yè)

  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） 增加進(jìn)度條標(biāo)簽

首先，在body部分，添加如下的進(jìn)度條的標(biāo)簽：

  1. <p>Task progress:</p> 
  2. progress id="prog" value="0" max="100"></progress> 

HTML 5中的進(jìn)度條使用的是<progress>標(biāo)簽，在這里，設(shè)置了開(kāi)始的值value為0，***的值為100，當(dāng)任務(wù)完成后，進(jìn)度條的值就會(huì)變成100了。我們將通過(guò)Javascript去更新這個(gè)值，所以以上的標(biāo)簽只是對(duì)進(jìn)度條進(jìn)行了初始化工作。

3） 點(diǎn)擊按鈕的編寫
現(xiàn)在，我們開(kāi)始編寫點(diǎn)擊按鈕的事件，代碼如下：

  1. <input id="startBtn" type="button" value="start" onclick="startProgress()"/> 
  2. <div id="numValue">0%</div> 

其中startProcess()的代碼如下：

  1. //當(dāng)前進(jìn)度  
  2. var currProgress = 0;  
  3. //進(jìn)度條是否完成  
  4. var done = false;  
  5. //進(jìn)度條計(jì)數(shù)的***數(shù)值  
  6. var total = 100;  

 

在聲明了上面的變量后，就可以編寫startProgress()方法了，代碼如下：

   
  1. function startProgress() { 
  2.  
  3.  //獲得進(jìn)度條的標(biāo)簽 
  4. var prBar = document.getElementById("prog"); 
  5. //獲得開(kāi)始按鍵 
  6. var startButt = document.getElementById("startBtn"); 
  7. //顯示的進(jìn)度百分比數(shù)值 
  8. var val = document.getElementById("numValue"); 
  9. } 

 接下來(lái)，當(dāng)用戶點(diǎn)了開(kāi)始按鈕后，需要將按鈕設(shè)置為不可用，并且要更新進(jìn)度條的數(shù)值：

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

并且要顯示出進(jìn)度條當(dāng)前完成的百分比并顯示出來(lái)，使用如下的代碼：

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

接著就可以對(duì)進(jìn)度條的數(shù)字進(jìn)行累加了：

  1. currProgress++; 

并且要判斷如果進(jìn)度數(shù)值達(dá)到100的話，則停止，設(shè)置done=false的標(biāo)識(shí)，否則每0.1秒通過(guò)Javascript的setimeout方法進(jìn)行延時(shí)，如下：

  1.  if(currProgress>100) done=true; 
  2. //如果還沒(méi)到進(jìn)度條100的數(shù)值，則繼續(xù)累加 
  3. if(!done) 
  4.     setTimeout("startProgress()", 100); 
  5.  
  6. //如果進(jìn)度條已經(jīng)達(dá)到100的數(shù)值，則重新設(shè)置按鈕可用，重新設(shè)置currProgrss=0 
  7. else     
  8. { 
  9.     document.getElementById("startBtn").disabled = false; 
  10.     done = 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.     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 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> 

 

 

責(zé)任編輯：佚名 來(lái)源： 51CTO.com
HTML5進(jìn)度條
相關(guān)推薦

2012-06-20 11:19:04

jQuery

2015-01-12 09:30:54

Android進(jìn)度條ProgressDia

2015-07-31 11:19:43

數(shù)字進(jìn)度條源碼

2015-01-12 12:13:03

Android進(jìn)度條ProgressDia

2021-11-02 07:44:36

CSS 技巧進(jìn)度條

2024-08-06 14:29:37

2011-07-05 15:16:00

QT 進(jìn)度條

2013-03-12 10:35:06

CSS 3

2024-12-02 09:37:51

2015-08-03 11:39:20

擬物化進(jìn)度條

2012-01-17 13:58:17

JavaSwing

2024-07-25 08:55:47

進(jìn)度條水缸進(jìn)度動(dòng)畫效果

2024-06-13 08:15:00

2009-06-06 18:54:02

JSP編程進(jìn)度條

2023-12-11 17:15:05

應(yīng)用開(kāi)發(fā)波紋進(jìn)度條ArkUI

2022-03-07 15:40:51

Linux軟件代碼

2019-04-16 14:36:32

QQApp Store語(yǔ)音

2020-12-14 13:32:40

Python進(jìn)度條參數(shù)

2010-01-25 18:27:54

Android進(jìn)度條
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)