确定进度条

Question

当点击播放和暂停按钮时，JavaScript中的我的动画GIF图像播放器库将具有类似于下图所示的进度条。

例如，如果我的GIF动画有5个具有这些持续时间值的帧：

具有持续时间的GIF动画帧：

• 第1帧= 3,000毫秒
• 第2帧= 3,000毫秒
• 第3帧= 5,000毫秒
• 第4帧= 22,000毫秒
• 第5帧= 1,000毫秒

在上面的示例中，总GIF动画持续时间将 34,000ms

使用JavaScript我需要确定每个帧在我正在构建的Progressbar上占用的百分比。

当JS函数将活动GIF帧设置为上面的帧＃3时，它应该将我的进度条突出显示为帧1和2消耗的宽度，以及进度条上的起始位置是第3帧的开始。

因此从第1帧+第2帧开始需要6,000毫秒，并从GIF总时间34,000毫秒中获取百分比，并将其转换为DOM元素的百分比宽度

Answer 1

34000/100 = 340;

3000/340 = 8.823529411764707;

(3000 + 3000)/340 = 17.647058823529413;

(3000 + 3000 + 5000)/340 = 32.35294117647059;

(3000 + 3000 + 5000 + 22000)/340 = 97.05882352941177;

(3000 + 3000 + 5000 + 22000 + 1000)/340 = 100;