javascript - 如何从给定的百分比构建进度条？

Question

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

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

这是一个 Python/Django 变量。

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

我将变量 test 转储为 json，例如：

json.dumps(test)

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

Answer 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 格式化这些矩形，使它们看起来不错:)

Answer 2

你可以看看这个并了解自己如何去做。

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