如何為cordova文件傳輸創建工作進度條

Question

只是一個簡單的問題：

我使用了Cordova文件傳輸中 Raymond Camden Progress事件的腳本，它運行正常。 它將百分比顯示為文本，直到達到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>

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

Answer 1

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

您可以將這些標記放在要使用進度條的位置，並將max和value屬性設置為：

• max是進度條在完全加載時可以表示的最大值（在您的情況下為100％）
• value是您的情況下bar perc的實際值。

所以你在HTML代碼中添加了這樣的東西：

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

然后你在statusDom.innerHTML = perc + "% loaded...";之后添加這樣的東西statusDom.innerHTML = perc + "% loaded..."; ：

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

您可以構建/設計更多花哨的進度條，當然在CSS中設置您的progress標記樣式 。
你可以從CSS3獲取一些不錯的想法： CSS-Tricks進度條

Answer 2

這是一個帶有進度條的完整示例。 我在我的應用程序中使用它

<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