简易进度条实现-优快云博客

本文链接：https://blog.youkuaiyun.com/yuan487639/article/details/84822227

说一下思路，这里用到的js方法需要有一个类似java的调度器，每隔多少秒执行一次；css方面，是一个父子标签，父标签长宽固定，子标签宽度被js控制，子标签的背景色表示进度条；
再看代码就简答多了


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .process-parent {
        position: absolute;
        width: 400px;
        border: 1px solid #ccc;
        height: 10px;
        border-radius: 3px;

    }

    .process-son {
        position: relative;
        background: #ff0000;
        height: 100%;
        font-size: 8px;
        text-align: center;
        color: #fff;
    }
</style>


<body>

<div class="process-parent">
    <div class="process-son" id="bar" style="width: 0%;">
    </div>
</div>
</body>
<script type="text/javascript">
    function run() {
        var bar = document.getElementById("bar");
        bar.style.width = parseInt(bar.style.width) + 1 + "%";
        bar.innerText = bar.style.width;
        if (bar.style.width == "100%") {
            clearTimeout(timeout);
            return;
        }
        var timeout = setTimeout('run()', 300);
    }
    window.onload = run();
</script>
</html>