css+js实现进度条

最新推荐文章于 2024-06-24 18:10:28 发布

yuan487639

最新推荐文章于 2024-06-24 18:10:28 发布

阅读量548

点赞数

分类专栏： web前端文章标签： java javascript ViewUI

本文链接：https://blog.csdn.net/yuan487639/article/details/84822227

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

说一下思路，这里用到的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>

想把这块代码简化下，html这边，只需要给定宽和高固定的div，js这边提供一个方法，参数为标签id，时间间隔以及每次间隔增加的百分比。

yuan487639

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css+js实现进度条

说一下思路，这里用到的js方法需要有一个类似java的调度器，每隔多少秒执行一次；css方面，是一个父子标签，父标签长宽固定，子标签宽度被js控制，子标签的背景色表示进度条；再看代码就简答多了[code="html"] Title * { padding: 0; margin: 0; }...
复制链接

扫一扫

专栏目录