Question

只是一个简单的问题：

我使用了Raymond Camden 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容器 - ＆gt;

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

希望有人能告诉我，如何创建进度条。如果你给我一个详细的解释，那就太棒了。谢谢！

Answer 1

最简单的方法之一可能是使用原生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

从这里获得一些不错的想法

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

如何为cordova文件传输创建工作进度条

2 个答案: