bootstrap框架的进度条 – 天上风筝天上飞

在这里，我将bootstrap的进度条改成动态，效果如下：

https://www.bilibili.com/video/BV1XZ4y1c72s?pop_share=1

主要代码：

<div class="progress">

        <div class="progress-bar" style="width:0%"></div>

        <div class="percent-display"></div>

    </div>

    <script>

        function ProgressMove() {

            var progressBarNode = document.querySelector(".progress-bar");

            var width = progressBarNode.style.width;

            var percentDisplayNode = document.querySelector(".percent-display");

            if (width != "100%") {

                width = parseInt(width);

                progressBarNode.style.width = (width + 1) + "%";

                percentDisplayNode.innerText = progressBarNode.style.width;

            } else {

                progressBarNode.style.width = 0;

                percentDisplayNode.innerText = progressBarNode.style.width;

                // progressBarNode.style.width = 0;

            }

            console.log("width=", progressBarNode.style.width);

        }

        setInterval(ProgressMove, 120);

    </script>

• 添加一个带有 .progress 类的 div。
• 接着，在上面的 div 内，添加一个带有 class .progress-bar 的空的 div。
• 添加一个带有百分比表示的宽度的 style 属性，例如 style=”width:70%” 表示进度条在 70% 的位置。