Question

我尝试过很多东西，但没有一个是正确的......

我正在尝试为HTML5 / Javascript进度条设置动画，并在一个页面中放置多个。另外，我尝试使用<style>和<script>标记将所有内容保存在一个HTML文件中。

现在，这是我的问题：进度条的条形部分在第一个[See here/JSFiddle] [Where I got the code from]

后的任何进度条上都没有显示

 <body>
    <div class="demo-wrapper html5-progress-bar"> <!-- This one shows just fine -->
        <div class="progress-bar-wrapper">
            <progress id="progressbar" value="0" max="100" stop="57"></progress>    <span class="progress-value">0%</span>

        </div>
    </div>
    <div class="demo-wrapper html5-progress-bar"> <!-- This one? Not so much. -->
        <div class="progress-bar-wrapper">
            <progress id="progressbar2" value="0" max="100" stop="57"></progress>   <span class="progress-value">0%</span>

        </div>
    </div>
</body>

有什么建议吗？

谢谢！

Answer 1

进度条具有相同的ID，因此编译器将两个进度条视为同一个进程。

Answer 2

每个进度条具有相同的ID，每个进度条应具有不同的id即progressbar1，progressbar2。然后，您需要修改JavaScript代码以为每个ID构建进度条。

HTML5 / Javascript进度多个动画条

2 个答案: