问题描述

在 html /css /javascript 中如何做一个进度条。我真的不想使用 Flash 。沿着这里可以找到的东西：http://dustincurtis.com/about.html

我真正想要的是一个’progress bar’，它改变了我在 PHP 中给出的值。你的过程是什么？有没有什么好的教程呢？

最佳解决方案

您可以通过 CSS 控制 div 的宽度来实现。大致沿着这些线：

<div id="container" style="width:100%; height:50px; border:1px solid black;">
  <div id="progress-bar" style="width:50%;/*change this width */
       background-image:url(someImage.png);
       height:45px;">
  </div>
</div>

如果您愿意，该宽度值可以从 php 发送。

次佳解决方案

如果您使用 HTML5 更好地使用新引入的<progress> 标签。

<progress value="22" max="100"></progress>

或创建一个自己的进度条。

用 sencha 写的例子

if (!this.popup) {
            this.popup = new Ext.Panel({
            floating: true,
            modal: false,
            // centered:true,
            style:'background:black;opacity:0.6;margin-top:330px;',
            width: '100%',
            height: '20%',
            styleHtmlContent: true,
            html: '<p align="center" style="color:#FFFFFF;font-size:12px">Downloading Data<hr noshade="noshade"size="7" style="color:#FFFFFF"></p>',

            });
}
this.popup.show('pop');

第三种解决方案

http://jqueryui.com/demos/progressbar/

检查一下，这可能是你需要的。

第四种方案

您可以使用 progressbar.js; 动画进度条控制和微小图表 (sparkline)

演示并下载 link

HTML 使用;

<div id="my-progressbar"></div>

Javascript 使用;

var progressBar;

window.onload = function(){

    progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
    progressBar.setPercent(60);

}

第五种方案

基本上是这样的：你有三个文件：你长期运行的 PHP 脚本，一个由 Javascript 控制的进度条 (@SapphireSun gives an option) 和一个进度脚本。艰难的部分是进步脚本; 您的长脚本必须能够报告其进度，而无需直接与您的进度脚本进行通信。这可以是会话 ID 的形式映射到进度计，数据库或检查未完成的内容。

过程很简单：

  1. 执行您的脚本并清除进度条

  2. 使用 AJAX 查询进度脚本

  3. 进度脚本必须以某种方式检查进度

  4. 更改进度条以反映该值

  5. 完成后清理

第六种方案

我试过一个简单的进度条。它不可点击只显示实际百分比。这里有一个很好的解释和代码：http://ruwix.com/simple-javascript-html-css-slider-progress-bar/

第七种方案

使用纯 JavaScript 的无限进度条

<div id="container" style="width:100%; height:5px; border:1px solid black;">
  <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div>
</div>

<script>
  var width = 0;
  window.onload = function(e){ 
    setInterval(function () {
        width = width >= 100 ? 0 : width+5;  
        document.getElementById('progress-bar').style.width = width + '%'; }, 200);            
  }
</script>

示例 http://fiddle.jshell.net/1kmum4du/

第八种方案

这是我的做法，我试图保持它的苗条：

<div class="noload">
    <span class="loadtext" id="loadspan">50%</span>
    <div class="load" id="loaddiv">
    </div>
</div>

小提琴 link

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。