如何創建科爾多瓦文件傳輸

我使用的腳本雷蒙德 - 卡姆登Progress Event in Cordova File-Transfer，它工作正常。它將百分比顯示爲一個文本，直到達到100％爲止。

這工作很好，但它看起來不好。我怎樣才能創建一個進度條，以零開始，並計數到100％，並有一個綠色的酒吧，增長？

即時通訊不是很好的JavaScript，所以我不知道，如何實現這一點。

這是我現在的代碼：

var statusDom; 

statusDom = document.querySelector('#status'); 

ft.onprogress = function(progressEvent) { 
      if (progressEvent.lengthComputable) { 
     var perc = Math.floor(progressEvent.loaded/progressEvent.total * 100); 
    statusDom.innerHTML = perc + "% loaded..."; 
      console.log(perc); 
      } else { 
        if(statusDom.innerHTML == "") { 
        statusDom.innerHTML = "Loading"; 
      } else { 
        statusDom.innerHTML += "."; 
      } 
     } 
    };

，並在我的索引我有一個div容器 - >

<div id="status"></div>

希望有人能告訴我，如何創建進度。如果你給我一個詳細的解釋，那將會很棒。謝謝！

來源

2014-08-28 Sithys

ü可以幫助我解決這個http://stackoverflow.com/questions/42784079/how-to-add-a- progress-bar-on-uploading-a-file類似的問題，但我不明白髮生了什麼，以及如何執行 – 2017-03-14 12:18:18

最簡單的方法之一可能是使用本機HTML5進度條：<progress></progress>標籤。

你把你想要有進度這些標籤和設置max和value性質其中：

max是最大值時，它的滿載進度條可以代表（在你的案件100％）
value是你的情況下perc的實際值。

所以你把這樣的事情在你的HTML代碼：

<progress max="100" value="0" id="ft-prog"></progress>

然後你statusDom.innerHTML = perc + "% loaded...";後添加如下內容：

document.getElementById("ft-prog").value = perc;

您可以構建/設計更看中的進度條當然你可以在CSS中設計你的progress標籤。
從這裏你可以使用CSS3得到一些不錯的想法：CSS-Tricks progress bars

來源

2014-08-28 15:52:23 benka

謝謝@benka，這爲我工作！ – Sithys 2014-08-29 09:25:00

下面是一個進度條的完整例子。我使用它在我的應用程序

<div class="progress sell_progress_bar"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="{{ upload_percentage }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ upload_percentage }}%"> 
     <span class="sr-only">100% Complete</span> 
    </div> 
</div>

爲了記錄我使用angularJS

來源

2016-04-18 10:23:28 Med

如何創建科爾多瓦文件傳輸

回答

相關問題