HTML 进度条

最新推荐文章于 2024-06-09 09:49:42 发布

段旭文

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量4.8k

点赞数 2

分类专栏： HTML 文章标签： HTML 进度条 css js

本文链接：https://blog.csdn.net/qq_33538554/article/details/87102368

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果截图：

Html页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>进度条</title>
</head>
<body>
    <div class="systemUpdates">
        <label class="newSystem">An up-to-date system is a healthy system</label><br>
        <label class="tips">please wait while system update searches for new updates for your system</label>
        <div class="progressBar" id="progressBar">
            <div class="barContent" id="barContent"></div>
        </div>
        <div class="bottomDisplay">
            <input type="button" class="cancelButton" value="CANCEL" />
            <span class="progress">
                <label id="progressShow">0%</label>
                <label> complete</label>
            </span>
        </div>
    </div>
</body>
</html>

css样式：

JS逻辑:
<script type="text/javascript">
        //窗体加载
        window.onload = function () {
            testBegin(0);
        }
        //测试开始
        function testBegin(val) {
            var progressBar = document.getElementById("progressBar");
            var barContent = document.getElementById("barContent");
            var label = document.getElementById("progressShow");
            for (var i = val; i <= 100; i++) {
                barContent.style.width = progressBar.offsetWidth * (i / 100) + "px";
                label.innerText = ((i) + "%");
                window.setTimeout("testBegin(" + ++i + ")", 200)
                break;
            }
        }
    </script>

段旭文

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
HTML 进度条

效果截图：Html页：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;进度条&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;div clas
复制链接

扫一扫

专栏目录