Question

在html和jQuery中，如何显示多个水平进度条？上课时我有个主意。学生对主题进行投票，投票时，进度条左右移动。如果您曾参与Adobe Connect的民意调查，那就是我正在考虑的那种外观。

它可以在html5中，因为我将是唯一一个显示结果的人（在课程的前面）。

它不能在闪光灯中，因为我不太了解闪光灯。

我只需要每15秒左右自动刷新页面。

Answer 1

如何在div中使用div？

HTML / CSS：

<div id="progress" style="width:200px; height:5px; border:1px solid black">
    <div style="background:green; height:inherit; width:0%">
    </div>
</div>

jQuery的：

$(document.ready(function() {
    window.setInterval(function() {
        $('#progress div').css('width', your_way_of_measuring_percentage + '%');
    }, 15000);
});

尚未测试此代码，因此请将社区wiki放在：）

Answer 2

当然你搜索过这个并找到了http://jqueryui.com/demos/progressbar/？您还有其他问题吗？

Answer 3

DOC： http://docs.jquery.com/UI/Progressbar 演示： http://jqueryui.com/demos/progressbar/

$(function() {$("#progressbar").progressbar({value: 37});

如果您需要多个进度条，只需创建多个元素

Answer 4

我会使用简单的嵌套div并将内部彩色div的宽度百分比设置为您要测量的任何内容的百分比。外部div可以具有边框和固定的宽度/高度。我会先使用这个基本功能。然后，您可以添加一个漂亮的进度条作为增强功能。

您可以使用jQuery来帮助编写此代码，但这主要是基本的JavaScript / HTML编码练习。您将无法同时（在单词的真实定义中）更新进度条，因为JavaScript是单线程的，但您可以使用某种排序时间间隔循环进度条并更新每个进度条的％完成单独反映每个个人（或其他）的进步。

水平进度条

4 个答案: