只是一个简单的问题：
我使用了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容器 – >
- <div id="status"></div>
希望有人能告诉我,如何创建进度条.如果你给我一个详细的解释,那就太好了.谢谢！
解决方法
最简单的方法之一可能是使用原生HTML5进度条：< progress>< / progress>标签.
您将这些标记放在要使用进度条的位置,并将max和value属性设置为：
> max是进度条在满载时可以表示的最大值(在您的情况下为100％)
> value是您案例中bar perc的实际值.
所以你在HTML代码中加入这样的东西：
- <progress max="100" value="0" id="ft-prog"></progress>
然后在statusDom.innerHTML = perc“％loaded …”之后添加类似的内容：
- document.getElementById("ft-prog").value = perc;
你可以构建/设计更多花哨的进度条,当然在CSS中设置你的进度标签样式.
您可以使用CSS3：CSS-Tricks progress bars从这里获得一些不错的想法
