如何创建cordova文件传输的工作进度条 [英] How to create a working progressbar for cordova file-transfer

问题描述

只是一个简单的问题：

我使用了来自Raymond Camden的脚本进度事件在Cordova文件传输，它工作正常。它显示百分比作为文本，向上计数，直到它达到100％。

i used the Script from Raymond Camden Progress Event in Cordova File-Transfer and it works fine. It displays the percentage as a text which counts up till it reaches the 100%.

这很好，但它看起来不好。如何创建一个进度条，从零开始，计数到100％，并有一个绿色条增长？

This works good, but it doesn't look fine. How can i create a progressbar, that starts by zero and counts up to 100% and has a green bar that grows?

在javascript中不是那么好，所以我不知道，如何实现这一点。

Im not so good in javascript so i don't know, how to realise this.

这是我的代码现在：

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容器 - >

and in my index i got a div container ->

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

希望有人能告诉我，如何创建进度条。如果你给我一个详细的解释，这将是巨大的。谢谢！

hope someone can tell me, how to create a progressbar. It would be great if you give me a detailed explanation. Thank you!

推荐答案

最简单的方法之一可能是使用原生HTML5进度条：< progress& < / progress> 标签。

One of the simplest way probably is to use the native HTML5 progress bar: <progress></progress> tags.

你把这些标签放在你想要的进度条上并设置 / code>和 value 属性其中：

You put these tags where you want to have the progressbar and set max and value properties where:

• <$ c $


• value 是您的情况下栏 perc 的实际值。

• max is the maximum value the progress bar can represent when it's fully loaded (100% in your case)
• value is the actual value of the bar perc in your case.

所以你在HTML代码中加入这样的代码：

So you put something like this in your HTML code:

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

然后你在 statusDom.innerHTML = perc +％ loaded ...; ：

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

您可以构建/设计更多精彩的进度条， / c> 中的 / code>标记。

您可以使用 CSS3 在此处获得一些不错的提示：CSS-Tricks进度栏

You can build / design more fancy progress bars of course styling your progress tag in CSS.
You can get some nice ideas from here using CSS3: CSS-Tricks progress bars

这篇关于如何创建cordova文件传输的工作进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！