Javascript 如何制作进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3951903/
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 make a progress bar
提问by john mossel
How would one go about making a progress bar in html/css/javascript. I don't really want to use Flash. Something along the lines of what can be found here: http://dustincurtis.com/about.html
如何在 html/css/javascript.js 中制作进度条？我真的不想使用 Flash。类似于可以在这里找到的内容：http: //dustincurtis.com/about.html
All I really want is a 'progress bar' that changes to the values I give in PHP. What would be your though process? Are there any good tutorials on this?
我真正想要的是一个“进度条”，它会更改我在 PHP 中给出的值。你的流程是什么？有没有这方面的好教程？
回答by Sam Dufel
You can do it by controlling the width of a div via css. Something roughly along these lines:
您可以通过 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>
That width value can be sent in from php if you so desire.
如果您愿意，可以从 php 发送该宽度值。
回答by najeeb
If you are using HTML5 its better to make use of <progress>tag which was newly introduced.
如果您使用 HTML5，最好使用<progress>新引入的标签。
<progress value="22" max="100"></progress>
Or create a progress bar of your own.
或者创建自己的进度条。
Example written in sencha
用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');
回答by SapphireSun
http://jqueryui.com/demos/progressbar/
http://jqueryui.com/demos/progressbar/
Check that out, it might be what you need.
检查一下，这可能是您需要的。
回答by bugra ozden
You can use progressbar.js;Animated progress bar control and tiny chart (sparkline)
您可以使用progressbar.js;动画进度条控件和小图表（迷你图）
Demo and download link
演示和下载链接
HTML usage;
HTML 用法；
<div id="my-progressbar"></div>
Javascript usage;
Javascript 使用；
var progressBar;
window.onload = function(){
progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
progressBar.setPercent(60);
}
回答by TheLQ
Basically its this: You have three files: Your long running PHP script, a progress bar controlled by Javascript (@SapphireSun gives an option), and a progress script. The hard part is the Progress Script; your long script must be able to report its progress without direct communication to your progress script. This can be in the form of session id's mapped to progress meters, a database, or check of whats not finished.
基本上是这样的：您有三个文件：您长时间运行的 PHP 脚本、一个由 Javascript 控制的进度条（@SapphireSun 提供了一个选项）和一个进度脚本。困难的部分是进度脚本；您的长脚本必须能够报告其进度，而无需与您的进度脚本直接通信。这可以采用映射到进度表、数据库或检查未完成内容的会话 ID 的形式。
The process is simple:
过程很简单：
- Execute your script and zero out progress bar
- Using AJAX, query your progress script
- Progress script must somehow check on progress
- Change the progress bar to reflect the value
- Clean up when finished
- 执行您的脚本并将进度条清零
- 使用 AJAX，查询您的进度脚本
- 进度脚本必须以某种方式检查进度
- 更改进度条以反映值
- 完成后清理
回答by Fricike
I tried a simple progress bar. It is not clickable just displays the actual percentage. There's a good explication and code here: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/
我尝试了一个简单的进度条。它不可点击，仅显示实际百分比。这里有一个很好的解释和代码：http: //ruwix.com/simple-javascript-html-css-slider-progress-bar/
回答by fubo
Here is my approach, i've tried to keep it slim:
这是我的方法，我试图保持苗条：
HTML:
HTML：
<div class="noload">
<span class="loadtext" id="loadspan">50%</span>
<div class="load" id="loaddiv">
</div>
</div>
CSS:
CSS：
.load{
width: 50%;
height: 12px;
background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);
-moz-border-radius: 4px;
border-radius: 4px;
}
.noload{
width: 100px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=);
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #999999;
position: relative;
}
.loadtext {
font-family: Consolas;
font-size: 11px;
color: #000000;
position: absolute;
bottom: -1px;
}
Fiddle: here
小提琴：这里
回答by pymen
Infinitive progress bar using pure Javascript
使用纯 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>
回答by surhidamatya
I used this progress bar. For more information on this you can go through this linki.e customization, coding etc.
我用过这个进度条。有关这方面的更多信息，您可以访问此链接，即定制、编码等。
<script type="text/javascript">
var myProgressBar = null
var timerId = null
function loadProgressBar(){
myProgressBar = new ProgressBar("my_progress_bar_1",{
borderRadius: 10,
width: 300,
height: 20,
maxValue: 100,
labelText: "Loaded in {value,0} %",
orientation: ProgressBar.Orientation.Horizontal,
direction: ProgressBar.Direction.LeftToRight,
animationStyle: ProgressBar.AnimationStyle.LeftToRight1,
animationSpeed: 1.5,
imageUrl: 'images/v_fg12.png',
backgroundUrl: 'images/h_bg2.png',
markerUrl: 'images/marker2.png'
});
timerId = window.setInterval(function() {
if (myProgressBar.value >= myProgressBar.maxValue)
myProgressBar.setValue(0);
else
myProgressBar.setValue(myProgressBar.value+1);
},
100);
}
loadProgressBar();
</script>
Hope this may be helpful to somenone.
希望这可能对某人有所帮助。
回答by san
var myPer = 35;
$("#progressbar")
.progressbar({ value: myPer })
.children('.ui-progressbar-value')
.html(myPer.toPrecision(3) + '%')
.css("display", "block");
