javascript 如何为cordova文件传输创建一个工作进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25551999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a working progressbar for cordova file-transfer
提问by Sithys
just a simple Question:
只是一个简单的问题：
i used the Script from Raymond Camden Progress Event in Cordova File-Transferand it works fine. It displays the percentage as a text which counts up till it reaches the 100%.
我在 Cordova 文件传输中使用了 Raymond Camden Progress Event 中的脚本，它工作正常。它将百分比显示为文本，直到达到 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?
这很好用，但看起来不太好。我如何创建一个进度条，它从零开始，计数到 100%，并且有一个不断增长的绿色条？
Im not so good in javascript so i don't know, how to realise this.
我不太擅长 javascript 所以我不知道如何实现这一点。
This is my Code now:
这是我现在的代码：
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 += ".";
}
}
};
and in my index i got a div container ->
在我的索引中，我有一个 div 容器 ->
<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!
希望有人能告诉我，如何创建进度条。如果你能给我一个详细的解释就太好了。谢谢！
回答by benka
One of the simplest way probably is to use the native HTML5 progress bar: <progress></progress>tags.
最简单的方法之一可能是使用原生 HTML5 进度条：<progress></progress>标签。
You put these tags where you want to have the progressbar and set maxand valueproperties where:
你把这些标签放在你想要进度条的地方，max并value在那里设置和属性：
maxis the maximum value the progress bar can represent when it's fully loaded (100% in your case)valueis the actual value of the barpercin your case.
max是进度条在完全加载时可以表示的最大值（在您的情况下为 100%）valueperc在您的情况下是 bar 的实际值。
So you put something like this in your HTML code:
所以你在你的 HTML 代码中放了这样的东西：
<progress max="100" value="0" id="ft-prog"></progress>
Then you add something like this after statusDom.innerHTML = perc + "% loaded...";:
然后你在之后添加这样的东西statusDom.innerHTML = perc + "% loaded...";：
document.getElementById("ft-prog").value = perc;
You can build / design more fancy progress bars of course styling your progresstag in CSS.
You can get some nice ideas from here using CSS3: CSS-Tricks progress bars
您可以构建/设计更多精美的进度条，当然也可以progress在CSS 中为您的标签设置样式。
您可以使用CSS3从这里获得一些不错的想法：CSS-Tricks 进度条
回答by Med
Here is a complete example with a progress bar. I am using it in my app
这是一个带有进度条的完整示例。我在我的应用程序中使用它
<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>
For the record I am using angularJS
为了记录，我正在使用 angularJS
