如何为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是perc您案例中栏的实际值.

所以你在HTML代码中添加了这样的东西:

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

然后你添加这样的东西statusDom.innerHTML = perc + "% loaded...";:

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

您可以构建/设计更多花哨的进度条,当然progress在CSS中标记样式.
你可以从CSS3获取一些不错的想法:CSS-Tricks进度条