如何从给定的百分比构建进度条？答案

【问题标题】：How to construct a progress bar from the given percentage?如何从给定的百分比构建进度条？
【发布时间】：2012-12-18 05:07:41
【问题描述】：

您好，我有一个百分比变量，如下所示：

test = "3%, 7%, 10%, 11%, 50%, 75%, 77%, 82%, 91%, 100%"

这是一个 Python/Django 变量。

现在，我想使用这些数字使用 Javascript 构建进度条。

我将变量 test 转储为 json 格式：

json.dumps(test)

如何在 Javascript 中调用它并从中构造进度条？谢谢

【问题讨论】：

您必须更加清楚自己真正想要做什么。您将哪些确切的 javascript 数据放入网页中？当您说从数据中“构建进度条”时，您是什么意思？进度条是在任何给定时间点显示特定完成百分比的小部件。随着操作的进行，您的代码通常会多次向其提供完成信息，并且进度条会将这些信息转换为可视化显示。目前尚不清楚您的问题真正要求的是什么。

标签： javascript python progress-bar

【解决方案1】：

不要指望别人为你做这种工作，你需要自己做。我为您提供了一个简短的示例和解释，以帮助您了解发生了什么，其余的由您决定。

以下是 Python 中的命令行示例：

import sys, time
print

pers = [3, 7, 10, 11, 50, 75, 77, 82, 91, 100]
for per in pers:
    sys.stdout.write('\r[%s>%s]' % (
        ('=' * ((per / 2) -1)), ' '*(50-(per/2)))
    )
    sys.stdout.flush()
    time.sleep(0.5)

print
print

你明白这里发生了什么吗？基本概念是您从总数中添加进度。所以，在这里我使用time.sleep(0.5) 来添加随机时间，这样你就可以实际看到进度，但是当你编写你的javascript代码时，这将随着你需要的加载而进行。

所以，一旦你掌握了这个想法，只需在 javascript 中重复同样的事情，除了不是向字符串添加字符，而是扩展矩形或其他东西的宽度。而且，您想显示整体的进度，因此您可能应该在进度之一的正后方有一个已经全宽的相同矩形，显示它还有待加载的总数。然后用 css 格式化这些矩形，让它们看起来不错:)

【讨论】：

【解决方案2】：

您可以看看this，了解自己的做法。

如果从字符串中获取值是您的问题，您可以使用split() 和/或正则表达式从字符串/json 对象中获取值数组。

【讨论】：