如何制作进度条

Question

如何在html/css/javascript中创建进度条.我真的不想使用Flash.可以在这里找到的东西:http://dustincurtis.com/about.html

我真正想要的只是一个'进度条',它改变了我在PHP中给出的值.你的过程会是什么？这有什么好的教程吗？

Answer 1

您可以通过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发送该宽度值.

Answer 2

如果您使用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');

Answer 3

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

检查出来,它可能是你需要的.

Answer 4

您可以使用progressbar.js;动画进度条控件和小图表(迷你图)

演示和下载链接

HTML用法;

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

Javascript用法;

var progressBar;

window.onload = function(){

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

}

Answer 5

基本上,它的这一点:你有三个文件:您长时间运行PHP脚本,通过使用Javascript控制的进度条(@SapphireSun给出了一个选项),以及一个进度脚本.难点在于进步脚本; 您的长脚本必须能够在不直接与您的进度脚本通信的情况下报告其进度.这可以是会话ID映射到进度表,数据库或未完成的检查的形式.

过程很简单:

1. 执行脚本并将进度条清零
2. 使用AJAX,查询您的进度脚本
3. 进度脚本必须以某种方式检查进度
4. 更改进度条以反映该值
5. 完成后清理

Answer 6

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