問題描述

在 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。